I need help in using Bootstrap collapse. I created 3 buttons which are collapsing. The thing, that in my case it is only logical if only one button is collapsed. So I want to deactivate other buttons when I'm clicking on a button. Is there maybe any method to do this?
Thank you very much.
<div class="panel-group" id="accordion">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn btn-default" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseexample1" aria-expanded="false" aria-controls="collapseexample1">some example text</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-default" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseexample2" aria-expanded="false" aria-controls="collapseexample2">some text</button>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="collapseexample1">
<div class="col-lg-4">
random text
</div>
</div>
<div class="collapse multi-collapse" id="collapseexample2">
<div class="col-lg-4"></div>
<div class="col-lg-4>
random text again
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
This is a simplified example of my code.
You can write a jquery function for it. Get your button elements and toggle their disabled state when one of them is clicked. You should even find quite a lot of ready to go solutions for it if you search "bootstrap collapse expand one at the time"