Main sidebar
<div style="padding: 10px; height: 400px; border: 1px solid black">
<nav class="sidebar">
<ul id="level-1" class="sidebar-group-primary">
<li class="card">
<a href="#first-level-2" data-toggle="collapse" data-parent="#level-1">Level one</a>
<ul id="first-level-2" class="sidebar-group-secondary collapse show">
<li class="card">
<a class="collapsed" href="#first-level-3" data-toggle="collapse" data-parent="#first-level-2">Level two</a>
<ul id="first-level-3" class="sidebar-group-items collapse">
<li>
<a class="active" href="#">Level three</a>
</li>
<li>
<a href="#">Level three</a>
</li>
</ul>
</li>
<li class="card">
<a class="collapsed" href="#second-level-3" data-toggle="collapse" data-parent="#first-level-2">Level two</a>
<ul id="second-level-3" class="sidebar-group-items collapse">
<li>
<a href="#">Level three</a>
</li>
<li>
<a href="#">Level three</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="card">
<a class="collapsed" href="#second-level-2" data-toggle="collapse" data-parent="#level-1">Level one</a>
<ul id="second-level-2" class="sidebar-group-items collapse">
<li>
<a href="#">Level two</a>
</li>
<li>
<a href="#">Level two</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>