jquery - How to add plus minus symbol to a bootstrap accordion

Question

I using a bootstrap accordion, where the first panel is always open and the panel which is open gets a class in . I'm checking from my jquery code to see if the class contains class in it highlights that anchor . But currently all the anchor are highlighted.

I just want the first anchor to get highlighted that is open and rest closed panel should have some different style.

here is the fiddle : Fiddle

As you can see all the anchor tags are highlighted. I want first anchor to get some different styling. The whole idea is to add plus / minus symbol to the accordion.

Answer 1

Made a slight modification to the @Arun P Johny answer from above

First: Changed the <i> to a <span> tag, per Bootstrap 3 documantation

Second: added a second event check for users closing an open tab, removing the class and changing the minus icon to a plus icon

Fiddle

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});