jQuery table row expand/collapse

Question

I've got a table and it has rows that are collapsible when clicked on the table heading.

Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?

See example build »

Answer 1

Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?

Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.