Question

I’m using jQuery to hide and show rows in a table.

Here is my jsFiddle: http://jsfiddle.net/Nbf75/5/

Notice that when you click a question, the answer slides in but it squishes the question.
It doesn’t do that if you set no animation, but I want an animation (not necessarily the preset slow animation, but any animation squishes it.)

So how do I get the animations to not squish the question?

Edit: This happens in Chrome but not Firefox, haven’t tested in any other browsers yet

Answer 1

This is an artifact of how the rendering engine handles table cells. You can work around it by wrapping the answer (inside the td) in a div, and operating directly on that div. The td will follow suit (since it’s automatically sized) and the effect is the same across all browsers.

See it in action.