Twitter Bootstrap mehrere Akkordeons, aber jeweils nur ein offenes Panel
Ich habe 3 Twitter Bootstrap-Akkordeons auf meiner Seite, die jeweils so eingerichtet sind:
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>
Dasid
Die Akkordeons sind wie die oben gezeigten, also#accordion1
, #accordion2
und#accordion3
. Gleiches gilt für die Panels pro Akkordeon.
Wie kann ich diese Einstellung so ändern, dass immer nur ein Bereich geöffnet ist? Im Moment ein PanelPer Akkordeon kann zu einem Zeitpunkt geöffnet sein, was nicht mein gewünschtes Verhalten ist.
DEMO:JSFiddle