Bootstrap 3 vertical menu with toggable submenus -

Bootstrap 3 vertical menu with toggable submenus -

using bootstrap 3, need build vertical menu containing toggable submenus. have next structure:

<nav> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2 (toggle)</a> <ul> <li><a href="#">item 2.1</a></li> <li><a href="#">item 2.2</a></li> <li><a href="#">item 2.3</a></li> </ul> </li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </nav>

i want ul within "item 2" hidden default , unhide/hide pressing "item 2".

the key of making vertical submenu toggable utilize attribute data-toggle="collapse" instead of mutual used in navs data-toggle="dropdown".

i prepared jsfiddle example, , wordking code:

<nav> <ul class="nav"> <li><a href="#">link 1</a></li> <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">link 2 (toggle)</a> <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> <li><a href="#">link 2.1</a></li> <li><a href="#">link 2.2</a></li> <li><a href="#">link 2.3</a></li> </ul> </li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </nav>

menu twitter-bootstrap-3 submenu