<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="row"> <div class="span12"> <div class="menu"> <div class="accordion"> <div class="accordion-group"> <div class="accordion-heading country"> <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;"/> <a class="accordion-toggle" data-toggle="collapse" href="#country1">W1-RoomA</a> </div> <div id="country1" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Category</th> <th>Location</th> <th>Qty</th> <th>Product ID</th> <th>Status</th> <th>More</th> </tr> </thead> <tbody> <tr> <td>Mouse</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Monitor</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Keyboard</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> </tbody> </table> </div> </div> <div class="accordion-heading country"> <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;"/> <a class="accordion-toggle" data-toggle="collapse" href="#country2">W1-RoomB</a> </div> <div id="country2" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Category</th> <th>Location</th> <th>Qty</th> <th>Product ID</th> <th>Status</th> <th>More</th> </tr> </thead> <tbody> <tr> <td>Mouse</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Monitor</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Keyboard</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> </tbody> </table> </div> </div> <div class="accordion-heading country"> <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;"/> <a class="accordion-toggle" data-toggle="collapse" href="#country3">W1-RoomB</a> </div> <div id="country3" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Category</th> <th>Location</th> <th>Qty</th> <th>Product ID</th> <th>Status</th> <th>More</th> </tr> </thead> <tbody> <tr> <td>Mouse</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Monitor</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> <tr> <td>Keyboard</td> <td>W1-RoomA</td> <td>-</td> <td>-</td> <td>Assigned</td> <td><a href="">More info</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>