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

回答1:

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.

回答2:

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/

回答3:

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

回答4:

Change

class="accordion-body collapse in"

class="accordion-body collapse"

On your collapseOne DIV

回答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

回答6:

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/

回答7:

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/

回答8:

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.

回答9:

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

回答10:

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. :)

回答11:

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

回答12:

<script type="text/javascript">  

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

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

</script>

回答13:

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

来源：https://stackoverflow.com/questions/9419470/how-do-i-get-my-accordion-to-load-with-all-the-menus-closed

标签

javascript

html

twitter-bootstrap

jquery-events