JQUERY UI Accordion start collapsed

Question

How can I make the jquery UI accordion start collapsed when the form loads. Is there any javascript code for this?

Answer 1

In your options specify:

{
  ...
  active: false,
  collapsible: true,
  ...
}

See documentation for active.

Answer 2

I was trying to do the same thing. Using Jquery UI tabs. I wanted none to show with 5 tabs when you start.

using active: false showed the 5th tabs content. So I set tabs CSS to display:none; since it in-line changes display. Hope this helps someone!

<script>
$(function() {
    $( "#tabs" ).tabs({
        active: false,
        collapsible: true,
    });
});

And in the style

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}

Answer 3

I used this code, as i was using a Dreamweaver Widget, the code that Topek didnt work for me hope this helps,

jQuery("#jQueryUIAccordion").accordion({ 
        event: "click",
        active: false,
        collapsible: true,
        autoHeight: false

    });

Answer 4

To complete the answer of topex, With Jquery UI 1.10.3 I had to set the 'collapsible' option before the 'active' one.

$( ".accordion" ).accordion("option", { 
    collapsible: true,
    active: false
});

See the documentation

Answer 5

If you're using the wysiwyg "Properties" and the coding confuses, try putting a number in the "Active" box one more than your list of Sections. I have 12 sections and put "13" in there and it worked for me.

Answer 6

If you look at the beginning of the panel group in your code, look for this

<div id="collapseOne1" class="panel-collapse collapse in"> 

if you just remove the "in" it has the panel close when the page loads.

Answer 7

If you are using default jquery accordion it always display first panel content, you can disable it by using active: false attribute.

jQuery(document).ready(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      active: false,
    });
});

but it's default behavior is for all panels will be set to the height of the tallest panel. so, for that you have to add "heightStyle" attribute.

heightStyle: "content",

so, each panel will be only as tall as its content.