Elaine Byene Elaine Byene - 7 months ago 22
Javascript Question

Disable Bootstrap accordion after opening

I have a multiple bootstrap accordion running and would like to disable once clicked. One tab has to remain open at all times.

For example, Link1 is already open so link1 should be disabled. Only link2 and link3 should be clickable. How should I achieve this?

Here's the code:

<div id="accordion">
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1">
Link 1
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2">
Link 2
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3">
Link 3
</a>
<div class="collapse in" id="collapseExample1">
This is the description 1
</div>
<div class="collapse" id="collapseExample2">
This is the description 2
</div>
<div class="collapse" id="collapseExample3">
This is the description 3
</div>
</div>


Javascript:

$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});


JSFiddle Link Demo:
https://jsfiddle.net/DTcHh/19604/

Answer

Just remove the classes collapse in from the element for which you want to disable accordion. Like here it is link1.

$('#accordion').on('show.bs.collapse', function () {
   $('#accordion .in').collapse('hide');
});
$(".collapse.in").removeClass('collapse in');

I hope this is what you wanted. Check this fiddle.