CODEWITHSUNDEEP
twitter-bootstrapbootstrap-accordion
Scott B
Scott B

Reputation: 40157

Bootstrap Accordion/Collapse hybrid?

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.

Upvotes: 0

Views: 176

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362280

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>

http://www.codeply.com/go/phCyVlq3yf

Upvotes: 1

Related Questions