Currently, I am utilizing Bootstrap and have implemented collapse panels in my project. I would like to add plus and minus icons to these panels.
I have managed to achieve this by using a code snippet that I found on Stack Overflow (I will include the link later). The code I used requires duplicating it for each group of collapse panels as they are assigned unique IDs. Is there a method to make it universal so that it only needs to be inserted once and will function across multiple panels on the same page?
jQuery(function ($) {
var $active = $('#accordionthree .panel-collapse.in').prev().addClass('active');
$active.find('.symbol').append('<span class="glyphicon glyphicon-minus pull-left"></span>');
$('#accordionthree .panel-heading').not($active).find('.symbol').prepend('<span class="glyphicon glyphicon-plus pull-left"></span>');
$('#accordionthree').on('show.bs.collapse', function (e)
{
$('#accordionthree .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordionthree').on('hide.bs.collapse', function (e)
{
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});