<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"> <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">Country</a> </div> <div id="country1" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Site</th> <th>Clients</th> <th>Primary</th> <th>Secondary</th> <th>DP</th> <th>BDP</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</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">Country 2</a> </div> <div id="country2" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Site</th> <th>Clients</th> <th>Primary</th> <th>Secondary</th> <th>DP</th> <th>BDP</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</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">Country 3</a> </div> <div id="country3" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <th>Site</th> <th>Clients</th> <th>Primary</th> <th>Secondary</th> <th>DP</th> <th>BDP</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>OK</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>