title: Get the element that was collapsed on hidden/shown.bs.collapse
body: <p>I'm working on an ASP.NET MVC application, making it completely by myself, learning as I do it. I am making a sidebar menu and I'm stuck trying to make an animated up/down arrow. Currently, the best I could get is that both/none arrows turn on hidden.bs.collapse/shown.bs.collapse. I've been looking at some posts here but I cannot make it work as I want it to. I have tried playing with something like <code>$('.glyphicon[aria-expanded="true"]')</code> but doesn't change the behavior.</p>
  
  <p><strong>Expected:</strong> on click, "collapse" is deleted and the arrow inverted.<br>
  <strong>Actual:</strong> on click, "collapse" is deleted but both/none arrows are inverted.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="sidebar-wrapper"&gt;
          &lt;div id="wrapperMenu" class="sidebar-nav"&gt;
              &lt;a href="#detailsSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu"&gt;Menu #1&lt;i class="glyphicon glyphicon-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="collapse" id="detailsSubMenu"&gt;
                  &lt;a href="#" class="list-group-item"&gt;A1&lt;/a&gt;
                  &lt;a href="#" class="list-group-item"&gt;A2&lt;/a&gt;
                  &lt;a href="#" class="list-group-item"&gt;A3&lt;/a&gt;
              &lt;/div&gt;
              &lt;a href="#editSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu"&gt;Menu #2&lt;i class="glyphicon glyphicon-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="collapse" id="editSubMenu"&gt;
                  &lt;a href="#" class="list-group-item"&gt;B1&lt;/a&gt;
                  &lt;a href="#" class="list-group-item"&gt;B2&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Js:</p>
  
  <pre><code>$('#wrapperMenu').on('shown.bs.collapse', function() {
      $(".glyphicon").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");
  });
  $('#wrapperMenu').on('hidden.bs.collapse', function() {
      $(".glyphicon").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/cfrozendeath/DSGxz/1278/" rel="nofollow">Fiddle</a></p>