<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>   <b class="pull-right ">Rp 1.200.000.000</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> <b class="pull-right ">Rp 1.200.000.000</b> </a> <ul id="menuPanelSubListGroup" class="collapse librePanelSubListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <span><a data-toggle="collapse" href="#menuPanelSubSubListGroup">SubItem 1</a></span> <b class="pull-right ">Rp 1.200.000.000</b> </li> <ul id="menuPanelSubSubListGroup" class="collapse librePanelListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <span><a href="#">SubSubItem 1</a></span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem3 pull-right"> 1</span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubSubItem 2</span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem3 pull-right"> 1</span> </li> <li class="list-group-item librePanelListGroupItem"> <span>SubSubItem 3</span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem2 pull-right"> 120.000.000.000</span> <span class="librePanelListGroupItem3 pull-right"> 1</span> </li> </ul> <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; } .librePanelListGroupItem3 { padding: 5px 35px 5px 300px; } .librePanelListGroupItem2 { padding: 5px 0px 5px 100px; } .librePanelSubListGroupItem { padding: 0px; } .librePanelSubSubListGroupItem { padding: 0px; } .libreMenuIcon { padding: 5px 3px; }