How to Use slideDown (or show) function on a table row?

Question

I\'m trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes

Answer 1

I had problems with all the other solutions offered but ended up doing this simple thing that is smooth as butter.

Set up your HTML like so:

  

    Hidden row content goes here
  

Then set up your javascript like so:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

Basically, make the "invisible" row 0px high, with a div inside.
Use the animation on the div (not the row) and then set the row height to 1px.

To hide the row again, use the opposite animation on the div and set the row height back to 0px.