Bootstrap submenu how can i close submenu 1 while I clicked submenu 2

Question

Below is my code for my collapse sub menu:

                <li class="sec1" data-toggle="collapse" data-target="#item3">
                    <a href="#">Item 3<span class="caret pull-right"></span></a>
                    <ul class="menu sub-menu collapse" id="item3">
                        <li><a href="#">Item 3A</a></li>
                        <li><a href="#">Item 3B</a></li>
                    </ul>
                </li>
                <li class="sec1" data-toggle="collapse" data-target="#item4">
                    <a href="#">Item 4<span class="caret pull-right"></span></a>
                    <ul class="menu sub-menu collapse" id="item4">
                        <li><a href="#">Item 4A</a></li>
                        <li><a href="#">Item 4B</a></li>
                    </ul>
                </li>

The problem for me is that, if my Item 3 dropdown menu is already open, and when I click Item 4 menu, the Item 3 menu will still open. How do I make Item 3 dropdown menu close when I click on Item 4 menu? I only wan one item dropdown menu to open at a time.

Answer 1

What you want is an accordion -like behavior. You may have to restructure your html a little in order to achieve it.

1. Wrap your list in a parent having a unique id .
2. For each of your toggle elements, add a panel class (bootstrap accordion is dependent to this), and data-parent="#parentIdHere" .

Here is a sample of your updated code: FIDDLE

NOTE: - Since panel class is required, you may have to tweak this in order to override bootstrap styles.