title: Bootstrap 2 Collapse Icon Does Not Change
body: <p>I have the following piece of code. When the page loads, the data in the collapse hides and I am left with the down arrow which is the icon-chevron-down.</p>
  
  <p>When I click on this icon, I need it to change to the corresponding 'up' icon, i.e. the icon-chevron-up icon. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Example of Twitter Bootstrap Collapse Methods&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="widget-box transparent"&gt;
                                          &lt;div class="widget-header widget-header-flat"&gt;
                                              &lt;h4 class="lighter"&gt;
                                                  &lt;i class="icon-star orange"&gt;&lt;/i&gt;
                                                  Dashboard
                                              &lt;/h4&gt;
  
                                              &lt;div class="widget-toolbar" style="margin-left:30px"&gt;
                                                  &lt;a href="#" data-toggle="collapse" data-target="#summaryData"&gt;
                                                      &lt;i class="icon-chevron-down"&gt;&lt;/i&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="widget-body collapse in" id="summaryData"&gt;
                                                  Test me
                                              &lt;/div&gt;&lt;!-- /widget-body --&gt;
                                          &lt;/div&gt;&lt;!-- /widget-box --&gt;
  &lt;/body&gt;
  
      &lt;script type="text/javascript"&gt;
    $('#summaryData').collapse('hide');
  
          $('#summaryData').on('show hide', function (e) {
          if(!$(this).is(e.target))return; 
          $('#summaryData').toggleClass('icon-arrow-up icon-arrow-down', 200);
      });
          });
  &lt;/script&gt;
  &lt;/html&gt;      
  </code></pre>