Twitter-bootstrap collapse plugin - how to enable multiple "groups" to be opened?

Twitter Bootstrap

Twitter Bootstrap Problem Overview


I'm working with the collapse plugin and I'm wondering how I can enable multiple groups to be open at the same time. In their demo page:

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

Only one is allowed to be open at a given time. I suppose this is the expected behavior of accordions, but how can I change it so that opening one group does not collapse the others?

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

Just don't use data-parent attributes:

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

Solution 2 - Twitter Bootstrap

For a solution that expands/collapses each panel dependently and allows multiple accordions on each page.

If all your accordions and groups have unique ids then you can have as many accordions on the page as you want

Each accordion needs a unique id:

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

Each heading needs a unique id

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

Each body needs a unique id, and if applicable a reference the the heading to be used

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

Example on JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/

Solution 3 - Twitter Bootstrap

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

An example with bootstrap 4 on JSFiddle : https://jsfiddle.net/tw1j7Lf3/7/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRobViousView Question on Stackoverflow
Solution 1 - Twitter BootstrapsodyView Answer on Stackoverflow
Solution 2 - Twitter BootstrapdinamiteView Answer on Stackoverflow
Solution 3 - Twitter BootstrapRegis TEDONEView Answer on Stackoverflow