Pfthb

Consider the following table which iterates data from an sqlite database using flask and sqlalchemy.

Assume for this example that the data is a list of invoices and clicking on each row opens a collapsible bootstrap accordion whith further information for the clicked invoice.

<table class="table table-hover" data-toggle="table"> 
<thead>
 <tr>
 <th>Date</th>
 <th>Invoice</th> 
 </tr>
</thead>

<tbody>
<tr data-toggle="collapse" data-target="#accordion" class="clickable">
% for inv in invoices %
 <td>
 inv.number 
 </td>
</tr>
<tr>
 <td>
 <div id="accordion" class="collapse">
 inv.data 
 </div>
 </td>
</tr>
% endfor %
</body>
</table>

The problem here is that only the first row is clickable and clicking on it opens all the rows instead of just a single row whereas we would like to be able to click on each row and reveal the data for that specific row exclusively.

I think the problem is do to with the data-target="#accordion" tag which targets the iteration of the collapsed data placeholder instead of the specific placeholder itself.

You can see an example here Twitter Bootstrap Use collapse.js on table cells [Almost Done] and here http://jsfiddle.net/whytheday/2Dj7Y/11/ but again the content is static and not dynamic.

The solution would be to have a "dynamic" data-target tag which matches the target id but I have no idea how to do that.

To accomplish this task, you have to insert your tr tag into the jinja loop, then add a dynamic data-target to your tr tag and a dynamic id to all your collapsible bootstrap accordions; So each tr tag will point to the corresponding accordion. Here's what the code should look like:

<tbody>
 % for inv in invoices %
 <tr data-toggle="collapse" data-target="#inv.number" class="clickable">
 <td>
 inv.number 
 </td>
 </tr>
 <tr id="inv.number" class="no-border collapse">
 <td>
 <div>
 inv.data 
 </div>
 </td>
 </tr>
 % endfor %
</tbody>

The idea here is that, since the invoice number is unique, you will have accordions with unique ids. Thus each attribute data-target of your tr tags (generated dynamically them too), will point to the corresponding accordion.

Extras just in case:

you will notice that I added the class no-border to the second tr block. This is for the case where you would not want to have a border from Bootstrap tables... here is the corresponding css:

<style type="text/css">
 .table>tbody>tr.no-border>td
 border-top: none;
 
</style>