JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<span class="glyphicon glyphicon-plus" data-toggle="collapse" 
      data-target="#a" aria-expanded="false" aria-controls="a"></span>
<div class="collapse" id="a">Div 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 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 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 D</div>

JavaScript

$('.collapse').on('show.bs.collapse',function(){
      $('.collapse').not($(this)).removeClass('in');
      $('.collapse').not($(this)).prev('span').addClass('glyphicon-plus').removeClass(' glyphicon-minus');
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
}).on('hide.bs.collapse',function(){
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
});