Bootstrap 3 Collapse - Change of icon with change of classes

Question

Here's the fiddle: http://jsfiddle.net/krish7878/6xpdeLa6/

There are two div's .panel-heading and .panel-collapse. If .panel-collapse has class 'in' then a icon has to be added to .panel-heading. I have the jquery for it but the problem is the icons do not update when the class changes.

HTML Code:

<div class="sub-menu-1 panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                FASHION
            </a>
        </h4>
    </div><!-- /.panel-heading -->
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <ul class="list-normal sub-menu-list">
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Man
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Women
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Children
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Infants
                    </a>
                </li>
            </ul><!-- /.sub-menu-list -->
        </div>
    </div><!-- /#collapseOne -->
</div><!-- /.panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                SPORTS
            </a>
        </h4>
    </div><!-- /.panel-heading -->
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <ul class="list-normal sub-menu-list">
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Sports Gear
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Sports Shoes
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Discounted Stuff
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Other Option
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Other Option 2
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-chevron-right"></i>
                        Other Option 3
                    </a>
                </li>
            </ul><!-- /.sub-menu-list -->
        </div><!-- /.panel-body -->
    </div><!-- /#collapseTwo -->
</div><!-- /.panel -->

JS Code:

$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");

I think the code needs to be run each time the class changes but I'm not sure how to do it, any help would be appreciated.

you should consider toggle for this --> [SO Link](http://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon) — karthickj25, Aug 21 '14 at 10:51
Thank you Karthick, I had a look at this question before, I wanted the plus and minus for my design. — chandan, Aug 21 '14 at 16:57

Husen · Accepted Answer · 2014-08-21T11:31:47.087

JSFIDDLE

You can do like following:

$(document).ready(function(){
    $(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
    $(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
    $('.panel-heading a').click(function(){ 
        $('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
        $(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
        $(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
    });
});

Bootstrap 3 Collapse - Change of icon with change of classes

1 Answers1