Toggle additional rows in a table
<p>I am trying to setup a table to toggle additional 'detail' rows. Essentially, the table is loaded, if a row is clicked, it will insert a 'details' row after said row. If said row is clicked again, it will remove the 'details' row. The following yields unexpected results. I was wondering what the best approach would be?</p>

<pre><code>jQuery('.tasks-table tbody tr').toggle(
    function () {
        jQuery(this).next().remove();
    }, 
    function () {
        jQuery(this).after('&lt;tr&gt;&lt;td colspan="10"&gt;&lt;p style="margin-left: 50px;"&gt;lorem ipsum&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;');
    }
);
</code></pre>
