Disable Bootstrap accordion after opening

Question

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 1

This would give you that result.

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

$('a').on('click',function(){
  // enable all 
  $('a').each( function(){
     $(this).removeAttr('disabled')
  })
  // disable me
  $(this).attr('disabled', 'disabled')
})

jsFiddle: https://jsfiddle.net/DTcHh/19608/

Answer 2

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 .

Update: Final Fiddle with a proper solution.