"Groupable Table"
Bootstrap 2.3.2 Snippet by msurguy

<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>

Questions / Comments:

Thnx! Very cool! Could you tell me if it's possible to shut the first one when the second one opens?

Jan (0) - 4 years ago - Reply 0


Great!! Thanks a lot. Could you tell me what if I wanna set unfolded as default?

Lei (0) - 4 years ago - Reply 0


Very cool accordion to display data. Something I was looking for. Thanks David. Keep up this great work :)

AZU AZU (0) - 4 years ago - Reply 0


Related: See More