<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="panel panel-default"> <div class="panel-heading librePanelHeading"> <div class="panel-title"> <b class="pull-right glyphicon glyphicon-folder-close libreMenuIcon"></b> <a data-toggle="collapse" href="#menuPanelListGroup"> <span>Menu 1</span> </a> </div> </div> <ul class="list-group collapse in" id="menuPanelListGroup"> <li class="list-group-item librePanelListGroupItem"> <a data-toggle="collapse" href="#menuPanelSubListGroup"> <span>Item 1</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </a> <ul id="menuPanelSubListGroup" class="collapse librePanelSubListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <span><a href="#">SubItem 1</a></span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubItem 2</span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubItem 3</span> </li> </ul> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 2</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 3</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 4</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 5</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> </ul> <div class="panel-heading librePanelHeading"> <div class="panel-title"> <b class="pull-right glyphicon glyphicon-facetime-video libreMenuIcon"></b> <a data-toggle="collapse" href="#menu2PanelListGroup"> <span>Menu 2</span> </a> </div> </div> <ul class="list-group collapse out" id="menu2PanelListGroup"> <li class="list-group-item librePanelListGroupItem"> <a data-toggle="collapse" href="#menu2PanelSubListGroup"> <span>Item 1</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </a> <ul id="menu2PanelSubListGroup" class="collapse librePanelSubListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <span><a href="#">SubItem 1</a></span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubItem 2</span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubItem 3</span> </li> </ul> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 2</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 3</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 4</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> <li class="list-group-item librePanelListGroupItem"> <span>Item 5</span> <b class="pull-right glyphicon glyphicon-chevron-right"></b> </li> </ul> </div> </div>

a { color: #666666; } .libreProfileSpan { margin-left: 10px; } .librePanelHeading { padding: 5px 10px; } .librePanelListGroupItem { padding: 5px 15px; } .librePanelSubListGroupItem { padding: 0px; } .libreMenuIcon { padding: 5px 3px; }