slide down new rows on table using jQuery

Question

Hi.

I have a table. When someone hits a link button (more) on one of it's rows, I want some new rows slide down and lie below this link and above lower rows. I used this script:(first I set "display" of those new rows to "none")

$(document).ready(function(){
$("a").toggle(function(){
    $(".classOfRowsToSlideUp").slideUp('fast');
$(".classOfRowsToSlideDown").css("display", "block");
}, function(){
$(".classOfRowsToSlideUp").slideDown('fast');
$(".classOfRowsToSlideDown").css("display", "none");
});              
});

The problem is when I hit the link, it works but causes the center div to expand (horizontally in Firefox and vertically in IE!) for one second. This looks very simple but I cant figure this out. There are a bunch of examples on net but they're not for table. but I want this as a vertical menu on right of my page as a table.

Thanks in advance.