title: Twitter Bootstrap Use collapse.js on table cells [Almost Done]
body: <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=&quot;table table-striped&quot; id=&quot;account-table&quot;&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=&quot;collapse&quot; data-target=&quot;#demo1&quot; data-parent=&quot;#account-table&quot; class=&quot;&quot;&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=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
          &lt;td class=&quot;text-error&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
          &lt;div id=&quot;demo1&quot; class=&quot;demo out collapse&quot;&gt;Demo1&lt;/div&gt;
      &lt;/tr&gt;
  </code></pre>
  <p>See:
  <a href="http://jsfiddle.net/2Dj7Y/" rel="nofollow noreferrer">http://jsfiddle.net/2Dj7Y/</a></p>
  <p>The only issue is that it displays the &quot;dropdown information&quot; in the wrong place, I would like to add in a new row, instead of printing it 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 the first row)</p>
  <pre><code> &lt;tr data-toggle=&quot;collapse&quot; data-target=&quot;#demo1&quot; data-parent=&quot;#account-table&quot; &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=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
              &lt;td class=&quot;text-error&quot;&gt;&lt;/td&gt;
              &lt;td class=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
               &lt;tr id=&quot;demo1&quot; class=&quot;demo out collapse&quot;&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=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
                      &lt;td class=&quot;text-error&quot;&gt;&lt;/td&gt;
                      &lt;td class=&quot;text-success&quot;&gt;$150.00&lt;/td&gt;
                  &lt;/tr&gt;    
  
          &lt;/tr&gt;
  </code></pre>
  <p>See <a href="http://jsfiddle.net/ypuEj/" rel="nofollow noreferrer">http://jsfiddle.net/ypuEj/</a></p>