How can I load my accordion with all menus closed?

Question

I'm trying to follow an example here

http://twitter.github.com/bootstrap/javascript.html#collapse

I posted the layout here

http://jsfiddle.net/gqe7g/

The loading behavior is strange. It shows Menu1, then collapses it, and then shows Menu2 and Menu3. I would like everything to fall apart. I tried the following without success

$('#accordion').collapse({hide: true}) 

Answer 1

Replacement

 $(".collapse").collapse(); $('#accordion').collapse({hide: true}) 

from:

 $('#collapseOne').collapse("hide"); 

gotta do the trick. I think the first one switches by default, and this one line disables it.

Answer 2

From the doc:

If you want to open it by default, add an extra class to.

In other words, leave "in" and it will be closed by default. http://jsfiddle.net/JBRh7/

Answer 3

If you want to close all pages reset when loading:

In the collapse in class, replace it with the collapse class.

 id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne"> 

Update to:

 id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 

Answer 4

If you want accordion to collapse initially you can do this using pre- existing bootstrap , javascript is not needed.

Adding a collapsed class to a binding or handle that will be a click for toggle users to open / close. Also remove the in class from the collapsed container.

Bootstrap also provides a couple of additional specifications that can be passed by adding data-parent="" and data-toggle=""

• data-parent accepts a selector and indicates that all discarded elements that are siblings of the data parent will be switched in unison.
• data-toggle accepts boolean true or false and sets the call to the discarded element.

---

Example Scenarios:

➤ Compression will be loaded

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> Details 

➤ Advanced will be downloaded

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body"> <div class="accordion-inner"> Details 

➤ Advanced will be downloaded

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Details 

In the third example, the accordion will expand by default regardless of the fact that the collapsed class is specified, because the in class in the container will receive more weight.

---

If you want to activate the accordion through Javascript, you need to call the collapse() method along with the corresponding id or class selector that targets the element to be dropped.

collapse() also accepts the same parameters that can be added to the markup. data-parent and data-toggle

Answer 5

Edit

 class="accordion-body collapse in" 

TO

 class="accordion-body collapse" 

On collapseOne DIV

Answer 6

you miss the 'in' class on divion-body divs for Menu2 and Menu3

each of your accordion bodies should have class="accordion-body collapse in" . Right now a couple of them have class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

Answer 7

You can pass the toggle: false option to the collapse operator so that all accordion elements are hidden when loading, for example:

 $('.collapse').collapse({ toggle: false }); 

Demo: http://jsfiddle.net/gqe7g/9/

Answer 8

this is what i use for my accordion. it starts to close completely. Do you want to

  active: false;//this does the trick 

full:

 <div id="accordian_div"> <h1>first</h1> <div> put something here </div> <h1>second</h1> <div> put something here </div> <h1>third</h1> <div> put something here </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#accordian_div").accordion({ collapsible: true, active: false, clearStyle: true }); }); </script> 

Not familiar with the bottle, but it seems a little cleaner than all the classes you have to deal with, and works smoothly.

Answer 9

Use the hide method that Bootstrap provides,

 $('.collapse').collapse('hide') 

Demo at http://thefanciful.com . My information is hidden when downloading and is activated when the button is clicked. :)

Answer 10

Just remove the .in class from .panel-collapse in "collapseOne". (Bootstrap v3.3.7)

Answer 11

Using jQuery . This worked for me when ALL containers collapsed on page load

Adding {active: false} and should have collapsible , of course,

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

Answer 12

 <script type="text/javascript"> jQuery(document).ready(function ($) { $('#collapseOne').collapse("hide"); }); </script> 

Answer 13

I know this is an old discussion, but there are two more solutions here:

1) Add

class aria-expanded="true" inside this link:

 <a data-toggle="collapse" data-parent="#accordion"...></a> 

2) If you use panels (e.g. below)

 <div id="collapse1" class="panel-collapse out collapse in" style="height: auto;"> 

changing collapse in to collapse out will also do the trick