Bootstrap 3 - collapsible list not collapsing properly

Question

I'm using Bootstrap 3 to make a vertical collapsible nav menu. The docs seem pretty straight forward. Trying to do it using just data-* tags. K.I.S.S.

I can't seem to get the other sections to collapse when I expand a new section. i.e. expanding and collapsing works on each individual item. But the non-active sections are supposed to close automatically if you set a data-parent.

Can someone please point out where I am going wrong?

jsfiddle

    <li><a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li><a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>

Answer 1

Ah... The panel classes were the trick... The Javascript must be using them as selectors.

From bootstrap.js: this.$parent.find('> .panel > .in')

By adding the panel class to the parent list element, the collapsing now works correctly. Maybe Twitter could have made this feature a but more generic? But it's working now. Hopefully this is not a hack...

Thanks for the clues...

<ul id="menu">

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#three">Three</a>
        <ul id="three" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>