Adding ‘active’ class to open Bootstrap accordion item

Posted by
December 24, 2018

Several times we want to have our own custom class on open tab of our bootstrap acoordion so that you can apply your custom css to it.

A basic jQuery solution to add an ‘active’ class to the accordion heading of the currently active accordion item.

(function ($) { 
$(function () { 
$('.panel-collapse').on('show.bs.collapse', function () { 
$(this).siblings('.panel-heading').addClass('activelink'); 
}); 
$('.panel-collapse').on('hide.bs.collapse', function () { 
$(this).siblings('.panel-heading').removeClass('activelink'); 
}); 
}); 
})(jQuery);

 

read more