disable multiselect on bootstrap collapse buttons [duplicate] - html

Question

This question already has answers here:
Bootstrap: Collapse other sections when one is expanded
(13 answers)
Closed 6 years ago.
I am trying to find a way to implement bootstrap buttons which will show collapsible content without allowing the content of more than one button to show at any time.
I can get the buttons to trigger collapsible content but I cant find a way to stop them both being un-collapsed at the same time:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
js fiddle demo here: https://jsfiddle.net/hzs68sne/

Answer 1

What you want to achieve looks like the collapse accordion.
To do this with your current setup, you can wrap the entire group in a single .panel div and make use of the data-parent attribute.
<div id="container">
<div class="panel">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/gbfb32z9/
Keep in mind:
The .panel div needs to be a direct child of the data-parent element.
The .collapse elements are direct children of a .panel element.