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.
