javascript - Event difference bootstrap collapse -

at moment i've code out like

$('.collapse').on('show.bs.collapse',function(){    $('.glyphicon-plus').removeclass('glyphicon-plus').addclass('glyphicon-menu-up'); }); $('.collapse').on('hide.bs.collapse',function(){    $('.glyphicon-menu-up').removeclass('glyphicon-menu-up').addclass('glyphicon-plus'); }); 

and html code (for example)

<span class="glyphicon glyphicon-plus" data-toggle="collapse"        data-target="#a" aria-expanded="false" aria-controls="a"></span> <div class="collapse" id="a"></div> <span class="glyphicon glyphicon-plus" data-toggle="collapse"        data-target="#b" aria-expanded="false" aria-controls="b"></span> <div class="collapse" id="b"></div> <span class="glyphicon glyphicon-plus" data-toggle="collapse"        data-target="#c" aria-expanded="false" aria-controls="c"></span> <div class="collapse" id="c"></div> <span class="glyphicon glyphicon-plus" data-toggle="collapse"        data-target="#d" aria-expanded="false" aria-controls="d"></span> <div class="collapse" id="d"></div> 

the things happening is

• when click call function or expand div span class change "glyphicon-menu-up" (triggered expending)

things want

• when click 1 of them call function or expand div need 1 span class i've click change class

optional

• when click span (or expand other div) span/div click before normal (not click) states while i'm using

  $('.collapse').click(function(e){    e.stoppropagation(); }); 

change js grateful

because don't want change html code (in case it's example in whole project it's hard change try select span using collapse event of bootstrap)

thanks

you need refer current element using this when collapsing below:

$('.collapse').on('show.bs.collapse',function(){       $(this).prev('span').toggleclass('glyphicon-plus glyphicon-minus');       //get previous span of element , toggle above classes }).on('hide.bs.collapse',function(){       $(this).prev('span').toggleclass('glyphicon-plus glyphicon-minus');       //get previous span of element , toggle above classes }); 

demo

regarding optional case, hope expecting below functionality:

$('.collapse').on('show.bs.collapse',function(){       $('.collapse').not($(this)).removeclass('in');       //hide divs except open removing `in` class       $('.collapse').not($(this)).prev('span').addclass('glyphicon-plus').removeclass(' glyphicon-minus');       //change classes except previous spans of element normal       $(this).prev('span').toggleclass('glyphicon-plus glyphicon-minus'); }).on('hide.bs.collapse',function(){       $(this).prev('span').toggleclass('glyphicon-plus glyphicon-minus'); }); 

updated demo