Collapsable Bootstrap table rows

Question

I have a table that shows some info on each row, I want to make that when you click a row several hidden rows with the details of the information appear from a bootstrap collapsable.

I'm using bootstrap 2.3 (Not possible to update right now) and here is the code of my table:

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="collapse" data-target=".transactions_1"class="clickable collapsed">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="out transactions_1 collapse">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>

I've tried the solution on this post, How do I collapse a table row in Bootstrap? , but it didn't work.

The rows that are supposed to be collapsed from the beggining are not collapsed and even though I can see the changes being applied when clicked, nothing happens to the rows.

Answer 1

I scanned through the other solutions, and came up one that works for you.

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name&nbsp;package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="myCollapse" data-target=".transactions_1">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="transactions_1 myCollapse in">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>
</table>

The html is slightly modified, and the css I used is this:

.myCollapse { display: none; } .myCollapse.in { display: table-row; }

This little bit of javascript does the hard work:

$("[data-toggle=myCollapse]").click(function( ev ) { ev.preventDefault(); $(this.getAttribute('data-target')).toggleClass("in"); });

See my fiddle for a working example.