title: bootstrap 3 glyphicon swap state on click
body: <p>Help, I am looking to have the glyphicon image swap on collapse in bootstrap 3. I found this thread here <a href="https://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon">Bootstrap 3 Collapse show state with Chevron icon</a>
  This works in jsfiddle but when copied to my own page the collapse works but the icon does not swap from up to down. Is there something I am missing? I have even placed this in a full download version of Bootstrap 3 and the icon fails to swap out. Here is the code:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading"&gt;
    &lt;h4 class="panel-title"&gt;
      &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
        Collapsible Group Item #1 
      &lt;/a&gt;&lt;i class="indicator glyphicon glyphicon-chevron-down  pull-right"&gt;&lt;/i&gt;
    &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
    &lt;div class="panel-body"&gt;
      Anim pariatur cliche reprehenderit, enim eiusmod high...
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the js:</p>
  
  <pre><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>