<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"> <center > <a class="accordion-toggle" data-toggle="collapse" href="#country1">SPUN POLE</a> </center> </div> <div id="country1" class="accordion-body collapse"> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <center><h1 style="font-size:16px; margin-top:10px; color:green;"> <u>Conductor </u> </h1></center> <th>Sr No.</th> <th>Product Name</th> <th>Quantity</th> <th>Unit</th> <th>Remove</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Eco Dog Conductor </td> <td> <input style="text-align: center;padding: 0;width:13%; height:25px;" type="number" name="quantity" min="1" id="quantity7" onchange="bom_update(7,'quantity7')" value="1"></td> <td>Nos</td> <td><i class="glyphicon glyphicon-trash"></i></td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> </tr> </tbody> </table> </div> <div class="accordion-inner"> <table class="table table-striped table-condensed"> <thead> <tr> <center><h1 style="font-size:16px; margin-top:10px; color:green;"> <u>Fabrication</u> </h1></center> <th>Site</th> <th>Clients</th> <th>Primary</th> <th>Secondary</th> <td>-</td> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> </tr> </tbody> </table> </div> </div> <div class="accordion-heading country"> <center> <a class="accordion-toggle" data-toggle="collapse" href="#country2">PSC</a> </center> </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> <td>-</td> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> </tr> </tbody> </table> </div> </div> <div class="accordion-heading country"> <center> <a class="accordion-toggle" data-toggle="collapse" href="#country3">RSJ</a> </center> </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> <td>-</td> </tr> </thead> <tbody> <tr> <td>Site-1</td> <td>123</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>Site-2</td> <td>321</td> <td>-</td> <td>-</td> <td>-</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>

.accordion-toggle { font-size:20px; }