I have a sidebar where there are 3 levels of navigation, the main navigation pages that you see on arrival, then when you click those the panels open to reveal more navigation.. and then one more level that appears when those links are clicked. Anyone know how I would do this? I tried making them panels within panels but everytime I go to open the secondary navigation within the main navigation it closes the main panel, then if you open the main panel up again its showing the 3rd navigation panel. I want to be able to see all 3 open at once and click open and close as you please. I've included an picture if what i'm trying to achieve and my code.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Business Development
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links">
<div class="panel-heading" role="tab" id="headingSeven">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">Link 1</a></div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<ul>
<li>List a</li>
<li>List b</li>
<li>List c</li>
</ul>
</div>
</div>
</li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
<li class="sidebar-links"><a href="#">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Proposals & Web Inquiries
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Sold Systems
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Marketing
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Reports
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Admin
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix" style="border-bottom: 1px solid #67ab48;">
<div class="panel-body">
<ul class="list-unstyled">
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
<li class="sidebar-links"><a href="">Link 1</a><br></li>
</ul>
</div>
</div>
</div>
</div>
</div>