Why does this line 'jump' when I call slideDown?

Question

Since there's a lot of code, I won't post it here. Rather, you can find it all here. That way you can play around with it and run it.

The problem happens when the 'Drop me down!' link is clicked. The DIV slides down as expected, but makes a sudden 'jump' right at the end.

Why does it do this, and how can I make it go away?

Answer 1

Give the hidden div a set height. jsfiddle

---

Edit. Found some answers here. You can store the height of each element, and then reapply it. Not ideal for your situation, but maybe a starting point

Answer 2

demo

codes link

.hidden_data {
    overflow: hidden;
    display:none; /* <--- remove this */
    padding: 10px;
    font-style: italic;
    color: #777;
}​

similar problem answered

Answer 3

Actually you don't need any of this. Just give your hidden element a width:

.hidden_data {
    display: none;
    padding: 10px;
    font-style: italic;
    color: #777;
    width: 300px;
}

It will just works!

PS: I spent all the weekend on this...