bootstrap initially collapsed element
another solution is to add toggle=false to the collapse target, this will stop it randomly opening and closing which happens if you just remove the "in"
eg
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div
id="collapseOne"
class="accordion-body collapse"
data-toggle="false"
>
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
You need to remove "in" from "collapse in"
When you expand or collapse accordion it just adds/removes a class "in" and sets the height:auto
or 0
to the accordion div.
Demo
So in your accordion when you define it just remove "in" class from the div as below. Whenever you expand an accorion it just adds the "in" class to make it visible.
If you render the page with "in" bootstrap looks for the class and it will make the div's height:auto, if it not present it will be at zero height.
<div id="collapseOne" class="accordion-body collapse">