How do I get my accordion to load with all the menus closed?

I'm trying to follow the example here

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

I have placed a mockup here

http://jsfiddle.net/gqe7g/

Loading behavior is strange. It shows Menu1 then collapses it then shows Menu2 and Menu3. I would like everything to open collapsed. I have tried the following without success

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

Solution 1:

From the doc:

If you'd like it to default open, add the additional class in.

In other words, leave out the "in" and it will default to close. http://jsfiddle.net/JBRh7/

Solution 2:

If you want to close all collapsed on page load:

In class collapse in replace it to class collapse.

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">

Solution 3:

Replacing

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

with:

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

should do the trick. I think the first one is toggled on by default and this one line switches it off.

Solution 4:

Change

class="accordion-body collapse in"

TO

class="accordion-body collapse"

On your collapseOne DIV

Solution 5:

If you want the accordion to collapse initially you can do so with pre-existing bootstrap definitions, javascript is unnecessary.

Adding the class collapsed to the anchor or handle which will be the click target for users to toggle them open/closed. Also, remove the in class from the collapsing container.

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

• data-parent accepts a selector and specifies that all collapsible elements which are siblings of the data-parent will be toggled in unison.
• data-toggle accepts a boolean true or false and sets invocation on the collapsible element.

Example Scenarios:

➤ Will load collapsed

<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

➤ Will load expanded

<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

➤ Will load expanded

<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 3rd example, the accordion will default to being expanded regardless of the fact that the collapsed class is specified because the in class on the container will receive more weight.

If you do want to trigger the accordion via Javascript you only have to call the method collapse() along with the appropriate id or class selector which targets the collapsible element.

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