Bootstrap collapsing nav li menu

Question

I'm trying to use Bootstrap's collapse plugin however with little success. I want an accordion style navigation menu with hidden sub-menus.

My HTML & JS:

 <ul class="nav nav-list">

    <li class="nav-header">
        <span>
            Home
            <span class="pull-right"  data-toggle="collapse">X</span>
        </span>
        <ul class="nav nav-list collapse in" id="test" >
            <li><a href="/ticket_list.cfm" title="Show list of tickets">Open Tickets</a></li>
            <li><a href="/account/" title="Edit user accounts">Accounts / Community</a></li>
        </ul>
    </li>  
  </ul>    
            <script type="text/javascript">
                $('.collapse').collapse()
            </script>

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.

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.

Answer 1

Add data-target in your li.

Fiddle

<li class="nav-header"  data-toggle="collapse" data-target="#test"> <span>

Also if you want to have it collapsed initially you dont need to call .collapse() instead you can just remove in class from the collapsible section. i.e

  <ul class="nav nav-list collapse" id="test">