Menu
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?
765
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 .
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/
150
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/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
