Bootstrap nested accordion issue

Question

We are facing an issue in using nested bootstrap accordions. On click of the Parent accordion Paperless Settings The child element icons are changing and vice versa is happening too. It should not happen, the inner accordion like any other normal accordion.

Fiddle link: https://jsfiddle.net/6Lspm1k1/

Javascript:

$('#accordion .collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-nus");
}).on('hidden.bs.collapse', function(){
 $(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa-                plus");
    });

Answer 1

So the problem is that due to some reason that callback fires all the way up the accordion.

One solution that works and according to me is cleaner is to use CSS-selectors to determine what to display:

I've added so that each header has a fa-plus and a fa-minus and with CSS hides / shows depending on the class .collapsed

HTML changed from:

      <span class="fa fa-minus"></span>

to:

      <span class="fa fa-minus"></span><span class="fa fa-plus">

CSS added:

.accordion-toggle.collapsed > .fa-minus{
    display:none;
}
.accordion-toggle > .fa-plus{
    display:none;
}
.accordion-toggle.collapsed > .fa-plus{
    display:inline;
}

https://jsfiddle.net/6Lspm1k1/3/