title: Implementing a slide down for table rows
body: <p>I am trying to implement a slide down for table rows using the previous post <a href="https://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>