slideToggle height is "jumping"

Its a simple fix. Add this CSS rule to your stylesheet (Tested in Firebug to work, and from my past experience with this problem, this is the fix):

ol.message_list { position: relative }

It is a CSS bug, not a jQuery bug per se.

The quickest fix in your case:

.message_container { width: 361px; }

I'm not sure exactly why, but not giving the container a fixed width when containing a <p> causes issues, give it one and the jumpyness goes away.

I found this problem in many occasions in which I was animating just the height with slideToggle but not the margin/padding.

So, something like this might solve it:

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});

I have found yet another thing that affects it. Removing min-height from the CSS of that element fixed it for me.

if the toggled box hasn't height by default, you need to add it, for auto height add this:

.toggle-container {
 height: auto;
}

I found setting a width on the toggled container resolved the issue for me

.toggle-container { 
   width: 100%; }
}

I read slideToggle relies on a starting width and height to function correctly so depending on your page you may need to set width or height to get the behavior you would expect.

In my past situation I had the same problem, and the problem was that I had the transition: all 350ms; declaration in my CSS which was conflicting with .slideToggle. Removing that fixed it for me, so look up for transitions in CSS.

I don't know if this is still an issue, but what fixed it for me was that I had previously used CSS to "animate" it, so I had a transition effect on the element. Removing it fixed it for me.