Twitter Bootstrap Use collapse.js on table cells [Almost Done]

Question

I am working on an accounts page that lists transactions (credits and debits). I would like the user to be able to click on a table row and it expands showing more information.

I am using twitter bootstrap and have looked over the documentation and this is the result I have

<table class="table table-striped" id="account-table"> <thead>     <tr>         <th>#</th>         <th>Date</th>         <th>Description</th>         <th>Credit</th>         <th>Debit</th>         <th>Balance</th>     </tr> </thead> <tbody>     <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">         <td>1</td>         <td>05 May 2013</td>         <td>Credit Account</td>         <td class="text-success">$150.00</td>         <td class="text-error"></td>         <td class="text-success">$150.00</td>         <div id="demo1" class="demo out collapse">Demo1</div>     </tr> 

See: http://jsfiddle.net/2Dj7Y/

The only issue is that it displays the "dropdown information" in the wrong place, I would like to add in a new row, instead of printing at the top of the table

I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to first row)

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >             <td>1</td>             <td>05 May 2013</td>             <td>Credit Account</td>             <td class="text-success">$150.00</td>             <td class="text-error"></td>             <td class="text-success">$150.00</td>              <tr id="demo1" class="demo out collapse">                      <td>1</td>                     <td>05 May 2013</td>                     <td>Credit Account</td>                     <td class="text-success">$150.00</td>                     <td class="text-error"></td>                     <td class="text-success">$150.00</td>                 </tr>              </tr> 

See http://jsfiddle.net/ypuEj/

Cheers, and thanks for your help

Answer 1

I'm not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get it working and saw an example somewhere on SO that used accordion.

Here's your updated fiddle: http://jsfiddle.net/whytheday/2Dj7Y/11/

Since I need to post code here is what each collapsible "section" should look like ->

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">     <td>1</td>     <td>05 May 2013</td>     <td>Credit Account</td>     <td class="text-success">$150.00</td>     <td class="text-error"></td>     <td class="text-success">$150.00</td> </tr>  <tr>     <td colspan="6" class="hiddenRow">         <div class="accordion-body collapse" id="demo1">Demo1</div>     </td> </tr>