<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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="table-responsive"> <table class="table table-condensed"> <thead> <tr> <th>Deliverable</th> <th>Description</th> <th>Ending on</th> <th>Status</th> <th>Progress</th> </tr> </thead> <tbody> <tr class="clickable warning dropdown-deliverable" data-for="#details_1"> <td>uranium</td> <td>magic potion</td> <td>April 23, 2014</td> <td><span class="label label-info">Ongoing</span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 40%;"> 40% </div> </div> </td> </tr> <tr style="padding:0"> <td style="padding:0"></td> <td colspan=2 style="padding:0px;"> <div class="deliverable-infos" id="details_1"> <table class="table table-condensed table-user-content" id="hidden_table_1"> <tbody> <tr> <td>Started :</td> <td class="right-col">April 22, 2013</td> </tr> <tr> <td>Load :</td> <td class="right-col">500 h</td> </tr> <tr> <td>Fare :</td> <td class="right-col">3000 €</td> </tr> </tbody> </table> </div> </td> <td style="padding:0"></td> <td style="padding:0"></td> </tr> <tr class="clickable warning dropdown-deliverable" data-for="#details_2"> <td>detonator</td> <td>magic wand</td> <td>April 23, 2014</td> <td><span class="label label-warning">Pending</span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%;"> 100% </div> </div> </td> </tr> <tr style="padding:0"> <td style="padding:0"></td> <td colspan=2 style="padding:0"> <div class="deliverable-infos" id="details_2"> <table class="table table-condensed table-user-content" id="hidden_table_2"> <tbody> <tr> <td>Started:</td> <td class="right-col">April 22, 2013</td> </tr> <tr> <td>Load:</td> <td class="right-col">20 h</td> </tr> <tr> <td>Fare:</td> <td class="right-col">200 €</td> </tr> </tbody> </table> </div> </td> <td style="padding:0"></td> <td style="padding:0"></td> </tr> </tbody> </table> </div>

.clickable { cursor: pointer; } .right-col { text-align: center; }

$(document).ready(function() { $('.deliverable-infos').hide(); $('.dropdown-deliverable').on('click', function(e) { console.log("dropdown toggled!"); e.preventDefault(); e.stopPropagation(); //get targeted element via data-for attribute var dataFor = $(this).data('for'); var idFor = $(dataFor); idFor.slideToggle(); }); });