Collapsible Bootstrap, Show First Element

Answer :

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> 

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.

You also can trigger a clic on the first collapse element

$("#accordion a:first").trigger("click");