82

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

H Bellamy
  • 20,906
  • 22
  • 68
  • 110

7 Answers7

200

In your options specify:

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

See documentation for active.

JDB still remembers Monica
  • 21,669
  • 4
  • 66
  • 107
topek
  • 17,226
  • 3
  • 33
  • 43
  • still working on JQuery 1.4.4 as of today, though Visual Studio 2010 throws a JScript error (no error in the UI) on IE 8 – deltree Oct 23 '12 at 15:34
9

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;
}
nonono nonono
  • 95
  • 1
  • 4
4

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

    });
Hussein Nazzal
  • 2,539
  • 15
  • 34
Lyndon John Haslam
  • 41
  • 2
3

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

Community
  • 1
  • 1
shagshag
  • 421
  • 2
  • 8
1

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.

Steve
  • 11
  • 1
1

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.

Ashish Patel
  • 913
  • 10
  • 24
0

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.

user6236374
  • 1