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})

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/

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

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.

Change

class="accordion-body collapse in"

TO

class="accordion-body collapse"

On your collapseOne DIV

If you want the [tag:accordion] to [tag:collapse] initially you can do so with pre-existing [tag:Bootstrap] definitions, javascript is unnecessary.

Adding the class collapsed to the anchor or handle which will be the click target for users to [tag: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

you're missing the class 'in' on accordion-body divs for Menu2 and Menu3

each of your accordion-body divs needs to have class="accordion-body collapse in". Right now, a couple of them just have class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

You can pass the option toggle: false to the collapse statement to have all elements of the accordion hidden on load, like so:

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

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

this is what i use for my accordian. it starts off fully closed. you want

 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 bottstrap but this seems a bit cleaner than all the classes you have to deal with and works smoothly.

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

Use the hide method that Bootstrap provides,

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

Demo at http://thefanciful.com. My information is hidden on load, and activates when the button is pushed. :)

Using jQuery, This worked for me having ALL containers collapsed at page load

Adding {active: false} and must have collapsible enabled of course

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

<script type="text/javascript">	 

    jQuery(document).ready(function ($) {

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

</script>

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

1. Add

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

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

2) In case you're using panels (like below)

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

changing collapse in to collapse out will also do the trick

I know it may be a slightly hacky way but I added custom css:

.elementor-accordion-item:first-child { display: none; }

and then duplicated the first item on the list, the great thing with this is if you have multiple accordions on the page or site you only need to do this once.