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

i working on accounts page lists transactions (credits , debits). user able click on table row , expands showing more information.

i using twitter bootstrap , have looked on documentation , result 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 issue displays "dropdown information" in wrong place, add in new row, instead of printing @ top of table

i have tried adding in new table row (which displays row, , no collapse action (only applied 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, , help

i'm not sure have gotten past yet, had work on similar today , got fiddle working asking, did make table row under it, , used accordion control. tried using collapse not working , saw example somewhere on used accordion.

here's updated fiddle: http://jsfiddle.net/whytheday/2dj7y/11/

since need post code here each collapsible "section" should ->

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