title: How to archive multiple icon changes for Bootstrap collapse?
body: <p>When I click on Root Documents 1 and Root Documents 2 the icon should be changed “glyphicon-triangle-bottom” to “glyphicon-triangle-right”.</p>
  
  <p>In child list of Root Documents 1 and Root Documents 2 the icon should be changed on “glyphicon-triangle-right” to “glyphicon-triangle-bottom”.</p>
  
  <p>The scripts below was conflicted in child list </p>
  
  <pre><code>$('.collapse').on('shown.bs.collapse', function(){
  $(this).parent().find(".glyphicon-triangle-right").first().removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
  }).on('hidden.bs.collapse', function(){
  $(this).parent().find(".glyphicon-triangle-bottom").first().removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
  });
  </code></pre>
  
  <p>Reference Link:</p>
  
  <p><a href="http://jsfiddle.net/R6EAW/3150/" rel="nofollow">http://jsfiddle.net/R6EAW/3150/</a></p>
  
  <p>How archive the same without conflict.
  Kindly advice me is really appreciated.  </p>