Databases
StackOverflow2013
Postsdbo
POTwitter Bootstrap Use collapse.js on table cells [Almost Done]
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter Bootstrap Use collapse.js on table cells [Almost Done]
    text
    copied!<p>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.</p> <p>I am using twitter bootstrap and have looked over the documentation and this is the result I have </p> <pre><code>&lt;table class="table table-striped" id="account-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Date&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;th&gt;Credit&lt;/th&gt; &lt;th&gt;Debit&lt;/th&gt; &lt;th&gt;Balance&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class=""&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;05 May 2013&lt;/td&gt; &lt;td&gt;Credit Account&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;td class="text-error"&gt;&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;div id="demo1" class="demo out collapse"&gt;Demo1&lt;/div&gt; &lt;/tr&gt; </code></pre> <p>See: <a href="http://jsfiddle.net/2Dj7Y/">http://jsfiddle.net/2Dj7Y/</a></p> <p>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</p> <p>I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to first row)</p> <pre><code> &lt;tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" &gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;05 May 2013&lt;/td&gt; &lt;td&gt;Credit Account&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;td class="text-error"&gt;&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;tr id="demo1" class="demo out collapse"&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;05 May 2013&lt;/td&gt; &lt;td&gt;Credit Account&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;td class="text-error"&gt;&lt;/td&gt; &lt;td class="text-success"&gt;$150.00&lt;/td&gt; &lt;/tr&gt; &lt;/tr&gt; </code></pre> <p>See <a href="http://jsfiddle.net/ypuEj/">http://jsfiddle.net/ypuEj/</a></p> <p>Cheers, and thanks for your help</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload