I have a situation where I want to apply bootstrap accordion-like functionality to a panel element that has multiple panel-body elements. I'd like one of the panel-body elements to be expanded at load and the others to be collapsed. The panel-footer element will have data-toggle elements to show the panel-body elements. Each time one is uncollapsed, the others should auto collapse.
Here's what I have to start, but its not working as expected:
<div id="panel-parent" class="panel">
<h2 class="panel-title">Panel Title</h2>
<div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div>
<div id="panel2" class="panel-collapse collapse out">This div should be hidden at load</div>
<div class="panel-footer">
<span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span>
<span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span></div>
</div>
In the above example, the "out" class does not hide the panel at load and the data-toggle elements are not working as expected.
You don't need to use out as collapsed is the default state. Just make sure that the .panel is the immediate child of the accordion parent (panel-parent)..
<div id="panel-parent">
<div class="panel">
<h2 class="panel-title">Panel Title</h2>
<div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div>
<div id="panel2" class="panel-collapse collapse">This div should be hidden at load</div>
<div class="panel-footer">
<span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span>
<span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span>
</div>
</div>
</div>