Twitter bootstrap: adding a class to the open accordion title

Question

I am a jquery/javascript newbie. What I want to do is add a class to the open accordion title, and remove it when i open another.

heres the code:

&l         


        

Answer 1

Here's my solution to this problem. Based on some of the great answers above, but adapted to work with Bootstrap 3.1.x

$('#accordion')
  .on('show.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').addClass('active');
  })
  .on('hide.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').removeClass('active');
  });

Answer 2

class active dont give the item becouse in less files this class changed you have to give it css instead class. this code is work best and you can add another css that you required

 $(function () {
            $('#accordion')
     .on('show.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({'background-color': 'red','color':'white'})
     })
     .on('hide.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({ 'background-color': '#b6ff00', 'color': 'black' })
     });
        });

Answer 3

I think it would work if you put this on your javascript:

$('.accordion-toggle').on('shown', function () {
 $(this).addClass('active') });

$('.accordion-toggle').on('hidden', function () {
 $(this).removeClass('active') });

Answer 4

This works for me using Bootstrap 3.3.6,

 $('#accordion')
   .on('show.bs.collapse', function (e) {
       $(e.target).parent('.panel').addClass('panel-primary');
   })
   .on('hide.bs.collapse', function (e) {
       $(e.target).parent('.panel').removeClass('panel-primary');
   });
        });

Answer 5

simply check for the collapsed class added by the BS Code:

$('a.accordion-toggle').on('click', function () {
    if( $(this).hasClass('collapsed') !== true ){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});

Answer 6

This works for me..

$('.panel-default').on('show.bs.collapse', function () {
     $('.panel-heading').addClass('active');
});

$('.panel-default').on('hide.bs.collapse', function () {
     $('.panel-heading').removeClass('active');
});