Leroy Mikenzi Leroy Mikenzi - 1 year ago 424
CSS Question

How to add plus minus symbol to a bootstrap accordion

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 Source

Try the show event of collapse - bootstrap 3+

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#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');


.panel-heading.active {
    background-color: green;

Demo: Fiddle

In your code

$(document).ready(function () {
    if ($('div').filter(':not(in)')) {
        $('.panel-title a').addClass('active');

The filter() method returns a jQuery object so it sill always be truthy, also you are adding the class to all anchor elements in the title irrespective of whether it is active or not, also you are not changing it when the accordion is changed

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download