Groupable HTML Table with Bootstrap2

groupableTable.html

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