Search code examples
jquerycsstwitter-bootstrapbootstrap-4

Bootstrap Collapse:How to deactivate other buttons?


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.


Solution

  • 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"