<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

#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"; }