CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Elaine Byene
Elaine Byene

Reputation: 4142

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/

Upvotes: 0

Views: 13889

Answers (2)

Developer107
Developer107

Reputation: 1758

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.

Upvotes: 1

Michael Oakley
Michael Oakley

Reputation: 383

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/

Upvotes: 3

Related Questions