How to add plus minus symbol to a bootstrap accordion

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');
    })
});

then

.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

Working example! You can add the standard class collapsed to all tabs and then just use CSS like this:

.subnav-button .glyphicon-plus:before {
    content: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

Where .subnav-button is your desired button class and using standard bootstrap icons. Content of plus will then be replaced by the content of minus whenever the class collapsed does not lie on your button (which is exactly whenever the tab is not collapsed).

This is the HTML code at the beginning:

<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
  <li class="renoi-first-floor">
    Sitemap&nbsp;
    <span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
  </li>
</button>

The only downside to this is that you can not use the plus icon in a collapsed tab again without it changing to a minus, too. If you want that you could of course copy the class to a new one like this:

.glyphicon-accordion-plus-minus < .glyphicon-plus

And changing the CSS at the start of my post to the new class instead and then using the new class in the HTML code of your accordion instead of just glyphicon-plus.

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');
});

If you want to change plus/minus class on collapsing same panel than you can use javascript in this way(Also work on multiple panel)

<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
    $(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    })
});
</script>

It is working for this html block

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
            Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

check this jsFiddle example http://jsfiddle.net/navjottomer/8u57u/4/