title: Bootstrap collapsing nav li menu
body: <p>I'm trying to use Bootstrap's collapse plugin however with little success. I want an accordion style navigation menu with hidden sub-menus.  </p>
  
  <p>My HTML &amp; JS:</p>
  
  <pre><code> &lt;ul class="nav nav-list"&gt;
  
      &lt;li class="nav-header"&gt;
          &lt;span&gt;
              Home
              &lt;span class="pull-right"  data-toggle="collapse"&gt;X&lt;/span&gt;
          &lt;/span&gt;
          &lt;ul class="nav nav-list collapse in" id="test" &gt;
              &lt;li&gt;&lt;a href="/ticket_list.cfm" title="Show list of tickets"&gt;Open Tickets&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/account/" title="Edit user accounts"&gt;Accounts / Community&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;  
    &lt;/ul&gt;    
              &lt;script type="text/javascript"&gt;
                  $('.collapse').collapse()
              &lt;/script&gt;
  </code></pre>
  
  <p>This should work. When the page loads I can see the sub-menu get hidden for a ms. But I can click X or Home all I want and it won't expand.</p>
  
  <p>I have all the JS included and properly linked I verified that. I also have a accorion panel on my sub page and the collapse tabs work there.</p>