Twitter Bootstrap несколько аккордеонов, но только одна открытая панель одновременно
У меня есть 3 аккордеона Twitter Bootstrap на моей странице, каждый из которых настроен так:
<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>
id
из аккордеонов, как показано выше, так#accordion1
, #accordion2
а также#accordion3
, То же самое относится к панелям на аккордеон.
Как я могу изменить эту настройку так, чтобы одновременно открывалась только одна панель? На данный момент одна панельза аккордеон может быть открыт за один раз, что не является моим желаемым поведением.
DEMO:JSFiddle