Плагин Twitter-bootstrap collapse - как открыть несколько "групп"?

Я работаю с плагином коллапса, и мне интересно, как я могу одновременно открывать несколько групп. На своей демонстрационной странице:

Только один разрешается открывать в определенное время. Я предполагаю, что это ожидаемое поведение аккордеонов, но как я могу изменить его, чтобы открытие одной группы не разрушало других?

Ответы

Ответ 1

Просто не используйте атрибуты data-parent:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/

Ответ 2

Для решения, которое расширяет/сворачивает каждую панель и позволяет использовать несколько аккордеонов на каждой странице.

Если у всех ваших аккордеонов и групп есть уникальные идентификаторы, вы можете иметь столько же аккордеонов на странице, сколько хотите.

Для каждого аккордеона требуется уникальный идентификатор:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

Каждому заголовку нужен уникальный идентификатор

<div class="panel-heading" role="tab" id="headingOne">

Каждому телу нужен уникальный идентификатор и, если применимо, ссылка на заголовок, который будет использоваться

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

Пример в JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/