title: Bootstrap 3 Collapse show state with Chevron icon
body: <p>Using the core example taken from the Bootstrap 3 Javascript <a href="http://getbootstrap.com/javascript/#collapse-examples">examples page for Collapse</a>,
   I have been able to show the state of collapse using chevron icons.</p>
  
  <p>I have this working using:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#accordion .accordion-toggle').click(function (e) {
      var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
      $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
  });
  </code></pre>
  
  <p>This works (not fully tested in all browsers), but I'm wondering if there's a more elegant solution to this?</p>
  
  <p>Ideally I'd like to use the core function, but I'm not sure how to achieve the same results with it.</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#accordion').on('hidden.bs.collapse', function () {
      //do something...
  })
  </code></pre>
  
  <p>Here's a working version in <strong><a href="http://jsfiddle.net/Flocktome/R6EAW/10/">jsfiddle</a></strong>.</p>