Twitter-Bootstrap Collapse Plugin - Wie kann das Öffnen mehrerer "Gruppen" ermöglicht werden?

Ich arbeite mit dem Collapse-Plugin und frage mich, wie ich es ermöglichen kann, dass mehrere Gruppen gleichzeitig geöffnet sind. Auf ihrer Demoseite:

http://twitter.github.com/bootstrap/javascript.html#collapse

Zu einem bestimmten Zeitpunkt darf nur einer geöffnet sein. Ich nehme an, dies ist das erwartete Verhalten von Akkordeons, aber wie kann ich es ändern, damit das Öffnen einer Gruppe die anderen nicht zusammenbricht?

Verwenden Sie nur keine data-parentAttribute:

<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/

Für eine Lösung, die jedes Panel abhängig erweitert / reduziert und mehrere Akkordeons auf jeder Seite zulässt.

Wenn alle Ihre Akkordeons und Gruppen eindeutige IDs haben, können Sie so viele Akkordeons auf der Seite haben, wie Sie möchten

Jedes Akkordeon benötigt eine eindeutige ID:

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

Jede Überschrift benötigt eine eindeutige ID

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

Jeder Körper benötigt eine eindeutige ID und gegebenenfalls eine Referenz die zu verwendende Überschrift

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

Beispiel für JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/

$('#multipleOPened').on('click', function() {
  if($(this).is(':checked')) {
    $('#accordion .collapse').removeAttr('data-parent');
  } else {
    $('#accordion .collapse').attr('data-parent','#accordion');
  }
});

Ein Beispiel mit Bootstrap 4 unter JSFiddle: https://jsfiddle.net/tw1j7Lf3/7/