<div class="container">
<div class="row">
<h2>Vertical Menu Bar / Navigation / Tabs</h2>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
Collapsible Group Item #1 <span class="glyphicon glyphicon-plus pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2 <span class="glyphicon glyphicon-plus pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Collapsible Group Item #3 <span class="glyphicon glyphicon-plus pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree" aria-expanded="true">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
<a href="#" class="list-group-item"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> Menu Item</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
#navPanel {
max-width:300px;
}
.panel-title > a {
color: inherit;
display:block;
text-decoration:none;
}
.panel-body {
padding: 0px;
}
.list-group {
padding-left: 0;
margin-bottom: 0px;
}
.glyphicon-plus:before {
content: "\2212";
}
.collapsed .glyphicon-plus:before {
content: "\2b";
}
