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})
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
If you are using bootstrap accordion and want that one of the accordion should be opened for the first time so add class="in" .
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With