table row slide up/down

table row slide up/down

I'm using some ajax to "expand" an item in a table, using the .after functionality of a table row, and similarly the .remove functionality to "collapse" those rows. This works fine.

However, I would like to gold plate it a little bit: I'd like the rows to slide down and slide up on expand/collapse respectively. I couldn't figure out how to do this .after, and using .slideUp instead of .remove on each row kinda works, but the table looks all screwed up during the transition.

Here's some relevant source code:

First, the 'collapse' part of the click function, $('a.button-expand').click:

               // remove all rows currently expanded
                $(this).parent('td').parent('tr').parent().children('tr.expanded').each(
                   function(i)
                   {
                      $(this).remove();
                   }
                );


And here's the expand:

            // get a handle on where we want to insert some rows
            var recurDetails = $(this).parent('td').parent('tr');
           
            // grab the ID number from the first cell
            var eventID = $(this).parent('td').parent('tr').children('td.event-id').html();
   
               // use an ajax call to get the rows to show   
                $.get(
                   '/manage/ajax/manage_event_recurring.php?event=' + eventID,
                   function(ajaxhtml){
                      recurDetails.after(ajaxhtml);
                     // end throbber
                     $this.parent('td').children('img.throbber').remove();
                   }
                );


Thanks,

Matt