Bootstrap normally closes other collapses when you click on one to open it.
Is there an option or hack to make it keep the collapses open unless explicitly closed without changing the look and layout of the panel-group?
Add a comment |
4 Answers
Update 2020
Bootstrap 4
How do you make Twitter Bootstrap Accordion keep one group open?
Bootstrap 3
You can just remove the data-parent attribute that is normally used in the accordion markup.
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> ... 
2 Comments
peter_the_oak
Thank you, this is really helping. After heaving read your hint, I quickly found it here in the docs: getbootstrap.com/javascript/#collapse -> Options -> parent
nam
@trusktr You may want to make it as an
Answer as it has helped many people like myself. Thank you.See this demo: http://plnkr.co/edit/OxbVII?p=preview
Idea:
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.
Comments
2021 here:
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class.
Bootstrap docs:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
They use the following collapse element:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class. </div> </div> This subscribes the collapse to events on #accordionExample, which is the main accordion element, via the data-parent attribute. Remove data-parent, and the collapse will no longer close when another one is expanded.
Comments
Bootstrap 4
NO NEED JAVASCRIPT
can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent
<div class="" id="accordion{{$i}}"> <h3 class="" data-toggle="collapse" data-target="#collapse{{$i}}" aria-expanded="true" aria-controls="collapse{{$i}}" class="mb-0"> Hai Im the clickable </h3> <div id="collapse{{$i}}" class="collapse" aria-labelledby="heading{{$i}}" data-parent="#accordion{{$i}}"> <p>Hai Im the collapsible content</p> </div> </div> 