title: Twitter bootstrap change icon on collapse
body: <p>I have a collapsable element which contains tabs, where the collapsable element has an icon (icon-arrow-down) at the left side of the header text. When you collapse this element the icon changes to icon-arrow-up. It works great, but, when I change between tabs, the icon changes too. </p>
  
  <p>Here is my jsFiddle: <a href="http://jsfiddle.net/m6R44/" rel="noreferrer">http://jsfiddle.net/m6R44/</a></p>
  
  <pre><code>&lt;div class="well"&gt;
      &lt;h3&gt;
          &lt;span class="icon-arrow-down" data-toggle="collapse" data-target="#collapseH" id="collapseP"&gt;&lt;/span&gt;
          &lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;
      &lt;/h3&gt;
      &lt;div id="collapseH" class="collapse in"&gt;
          &lt;ul class="nav nav-tabs" id="ic_tabs"&gt;
              &lt;li class="active"&gt;&lt;a href="#paragraph1" data-toggle="tab"&gt;Paragraph 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#paragraph2" data-toggle="tab"&gt;Paragraph 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#paragraph3" data-toggle="tab"&gt;Paragraph 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="ic_tabsContent" class="tab-content"&gt;
              &lt;div class="tab-pane fade in active" id="paragraph1"&gt;
                  content 1
              &lt;/div&gt;
              &lt;div class="tab-pane fade" id="paragraph2"&gt;
                  content 2
              &lt;/div&gt;
              &lt;div class="tab-pane fade" id="paragraph3"&gt;
                  content 3
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#collapseH').on('show hide', function(e){
          $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
      });
  &lt;/script&gt;
  </code></pre>