title: Toggle the glyphicon with bootstrap collapse
body: <p>I have <code>glyphicon-chevron-down</code> when div is in <code>collapsed</code> state,i want to replace it with <code>glyphicon-chevron-up</code> when the div is in <code>collapse in</code> state.I have many of these <code>collapsible</code> divs in my project.So i need to <code>toggle</code> the <code>glyphicon</code> on press of particular collapsibe content(or div).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="divcontainer"&gt; 
      &lt;span&gt;Click -----&gt;&lt;/span&gt;
      &lt;span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" href="#collapsecontent"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="collapse" id="collapsecontent"&gt;
      content
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function () {
      $('.glyphicon-chevron-down').click(function () {
          $(this).parent("div").find(".glyphicon-chevron-down")
              .toggleClass("glyphicon-chevron-up");
      });
  });
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/iamraviteja/amwLaojj/" rel="nofollow">here</a></p>