jQuery Accordion not working to set height to content

Question

I am trying to modify the accordion based on what I have researched in stackoverflow, and the height does still not change-- it is still the height of the tallest panel. Can someone please tell me what I am doing wrong or missing? Here is what I entered in the HEAD--

<link rel="stylesheet"   href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
  collapsible: true
});
</script>
<script>
$(".selector").accordion({ autoHeight: false }); 
</script>

Thank you.

Solution 1

You have three problems with your existing code. The following code should work for you:

$(function() {
    $("#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

1. You were not using the same selector for setting up your accordian.
2. You did not place your later code in a .ready() so it would not work properly if the accordian HTML was below the script tags.
3. The jQuery accordian does not have a autoHeight option. Based on the documentation you should have been using heightStyle.

If these changes did not fix your problem, please provide your HTML as well.

Solution 2

This work for me:

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion({ heightStyle: "content", autoHeight: false, });
});
</script>

Cheers.

Solution 3

Try this:

<script>
    $(function() {
        $( "#accordion" ).accordion({
            heightStyle: "content"
        });
    });
</script>

Solution 4

This solve my problem

  $(function() {
    $( "#accordion" ).accordion({
       collapsible: true,
       autoHeight: false
    });
  }); 

Solution 5

You're looking for,

heightStyle: "content"

As in,

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion({ heightStyle: "content" });
 });
</script>

From the documentation:

Setting heightStyle: "content" allows the accordion panels to keep their native height.

edit: I'm why people are suggesting autoHeight: false, because that's not even an option for .accordion. See the api for a full list of options here: http://api.jqueryui.com/accordion/

View more solutions

Comments

[Dan Nick]

Josh, gave a great response. I wanted to add that the default for Accordian is set to "auto" meaning all panels will be set to the height of the tallest panel.