<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="menus" class="panel-group menus"> <div class="panel panel-default"> <div class="panel-heading active"> <a data-toggle="collapse" data-parent="#menus" href="#collapse1"> <h4 class="panel-title">Menu A <b class="opened"></b> </h4> </a> </div> <ul id="collapse1" class="panel-collapse collapse in"> <li >1</li> <li >2</li> <li >3</li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading active"> <a data-toggle="collapse" data-parent="#menus" href="#collapse2"> <h4 class="panel-title">Menu B <b class="opened"></b> </h4> </a> </div> <ul id="collapse2" class="panel-collapse collapse in"> <li >1</li> <li >2</li> <li >3</li> </ul> </div> </div>

/* CSS used here will be applied after bootstrap.css */ .menus { padding:10px; width:300px; background-color:#451;} .closed { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .opened { display: inline-block; width: 0; height: 0; margin: 0 0 3px 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } #menus .active { background: #7d7d7d !important; } a { color:#000; text-decoration:none; } a:hover { text-decoration:none; }