Bootstrap collapsible side menu items

Question

I am trying to make a bootstrap side menu that makes sub items collapsible.

Similar to http://jsfiddle.net/ However I want link items in the submenus and not such a complicated structure.

This is what I tried

 <div class="row">
      <!-- Main component for a primary marketing message or call to action -->
        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Blog</a></li>
                <li><a href="#">About US</a></li>
                <li><a href="#">Jobs</a></li>
                </ul>
            </li>
             <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
         </ul>

        </div> 
  </div>

The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.

Answer 1

Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <li>
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    More
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <ul>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">About US</a></li>
                                    <li><a href="#">Jobs</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
        </ul>
    </div>
</div>