Mixing
Twitter-bootstrap collapse plugin - how to enable multiple “groups” to be opened?
Twitter-bootstrap collapse plugin - how to enable multiple “groups” to be opened?
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?
3 Answers
3
Just don't use data-parent attributes:
data-parent
Item 1 Body
</div>
</div>
Item 2 Body
</div>
</div>
</div>
http://jsfiddle.net/HJf6j/2/
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/
Your answer isn't really clear at all about what's going on inside this code snippet. Please clarify.
– jpaugh
Jul 2 '15 at 18:52
@jpaugh is this better?
– dinamite
Jul 4 '15 at 8:29
Yes. However, I have a question: what does the huge code block at the end demonstrate? Each of the collapsible elements seems to behave the same way... which makes the text "Passed tests" and "Failed Tests" very confusing to me
– jpaugh
Jul 5 '15 at 6:42
@jpaugh I've put the example code on JSFiddle, the collapse able elements should behave the same way. They only don't when different components share id's which confuses the javascript, often resulting in different panels than the one you clicked collapsing/expanding
– dinamite
Jul 6 '15 at 10:12
this works for me
– lorraine
Aug 8 '16 at 15:30
$('#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/
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You have invalid html with duplicated element ids, working example jsfiddle.net/esnt6ovr/2
– sody
Mar 25 '15 at 15:00