Collapsible bootstrap, show first element
You also can trigger a clic on the first collapse element
$("#accordion a:first").trigger("click");
Update for v4 :
The class .show
can be used on the .collapse
element to open it.
<div class="accordion" id="accordion-parent">
<a data-toggle="collapse" href="#collapseOne"></a>
<div id="collapseOne" class="collapse show" data-parent="#accordion-parent"></div>
<a data-toggle="collapse" href="#collapseTwo"></a>
<div id="collapseTwo" class="collapse" data-parent="#accordion-parent"></div>
</div>
Here's the same example working with v4 : Demo v4 (jsfiddle)
Bootstrap v2
If you add the .in
class to the .collapse
, it stays open :
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Ajout d'un nouveau fonctionnaire
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
Demo (jsfiddle)
Here is the demo with a simplified markup : http://jsfiddle.net/Sherbrow/yYuRz/2/
You do need to remove the style="height: 0px;"
from the .collapse
element if you want it to be displayed.
I don't think you've got all the HTML you need for the accordion to work unless you haven't pasted it all above.
The Bootstrap docs first example has the first element set to be open:
http://twitter.github.com/bootstrap/javascript.html#collapse (These docs are for v2.3.2, which is no longer officially supported.)
I think it's the class "in" that sets it to be open initially.
<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">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>