title: Bootstrap Toggle Sidebar Dropdown Icon
body: <p>On the sidebar navigation of my site, I've got dropdown menu's working. However, I want the icon to change between pointing right <code>&lt;i class="icon-angle-right"&gt;&lt;/i&gt;</code> and pointing down <code>&lt;i class="icon-angle-down"&gt;&lt;/i&gt;</code> depending on which state the code is in (closed or opened).</p>
  
  <p>Here's the code that repeats itself for each menu:</p>
  
  <pre><code>&lt;!-- USER --&gt;
  &lt;li class="nav-header"&gt;
      &lt;a href="#" data-toggle="collapse" data-target="#userMenu"&gt;
      &lt;font color="#333333"&gt;User&lt;/font&gt; &lt;i class="icon-angle-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul style="list-style: none;" class="collapse in" id="userMenu"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-envelope-alt"&gt;&lt;/i&gt; Messages &lt;span class="badge badge-info"&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-cogs"&gt;&lt;/i&gt; Settings&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-comment"&gt;&lt;/i&gt; Shoutbox&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; Staff List&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-flag"&gt;&lt;/i&gt; My Infractions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-exclamation-sign"&gt;&lt;/i&gt; Rules &amp;amp; Regulations&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-off"&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- RADIO DJ --&gt;
  &lt;li class="nav-header"&gt;
      &lt;a href="#" data-toggle="collapse" data-target="#radioDJMenu"&gt;
      &lt;font color="#34CCFF"&gt;Radio DJ&lt;/font&gt; &lt;i class="icon-angle-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul style="list-style: none;" class="collapse" id="radioDJMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Information &amp;amp; Stats&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;DJ Says&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Request Line&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Timetable&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Banned Songs&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>