Implementing a slide down for table rows
<p>I am trying to implement a slide down for table rows using the previous post <a href="http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row">here</a></p>

<p>I have a <code>newrole</code> table where I click on add icon and it gets added to <code>rolecart</code> table with 3 rows for each item. First row is copied as it is from the role table the next 2 rows are added using jQuery, below is the code.</p>

<pre><code>$("#table_newrole img.move-row").live("click", function() {
    var tr = $(this).closest("tr").remove().clone(); 
    tr.find("img.move-row")
        .attr("src", "/gra/images/icons/fugue/cross-circle.png")
        .attr("alt", "Remove");

    // first row copied from the source table as it is
    $("#table_rolecart tbody").append(tr); 

    // next two rows added like this
    var $inputtr = $('&lt;tr&gt;&lt;td colspan="3"&gt;Business Justification: &amp;nbsp;&lt;input type="text" id="ar_businessjust"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan="2"&gt;Start Date: &lt;input type="text" id="ar_startdate"&gt;&lt;/td&gt; &lt;td colspan="1"&gt;End Date: &lt;input type="text" id="ar_enddate"&gt;&lt;/td&gt;&lt;/tr&gt;');

    $("#table_rolecart tbody").append($inputtr);
});
</code></pre>

<p>When I add next item to the cart I want the previous item's last 2 rows to slide up (I will later provide and icon to slide down to show these rows)</p>

<p>Need to know how to implement this. more specifically I need to know how do I select previous cart items last 2 rows and then apply the slideup to the divs.</p>
