javascript - Bootstrap nested accordian issue -

we facing issue in using nested bootstrap accordians. on click of parent accordian paperless settings child element icons changing , vice versa happening too. should not happen , inner accordian 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");     }); 

so problem due reason callback fires way accordion.

one solution works , according me cleaner use css-selectors determine display:

i've added each header has fa-plus , fa-minus , css hides / shows depending on 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/