jQuery slideToggle jumps around

Question

I\'m using the jQuery slideToggle function on a site to reveal \'more information\' about something. When I trigger the slide, the content is gradually revealed, but is loc

Answer 1

I have found a workaround, but I'm still not sure of the details. It seemed that when the 'overflow: hidden' style was added by jQuery, the effect that a nearby floated element had changed. The workaround was to place a permanent 'overflow: hidden' on the slideToggle'd div, and also a negative margin-left to counterbalance the effect.

I am surprised that changing the overflow value has such an effect on layout, but there you have it...

Answer 2

Adding CSS3 transition/transform properties always solved any jumping issues for me with slideToggle... Example:

-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;

-webkit-transition: transform 0.26s ease;
-moz-transition: transform 0.26s ease;
-ms-transition: transform 0.26s ease;
-o-transition: transform 0.26s ease;
transition: transform 0.26s ease;
transition: -webkit-transform 0.26s ease;

Answer 3

I had the same problem, but overflow:hidden and position: relative had no effect. I put margin-bottom: -10px on the element that was toggling in, and it solved the issue.

Answer 4

The only thing that helped for me: give the content to scroll a width.

Answer 5

I had this issue when using floated elements inside the element that is toggled. Setting a width of 100% against the toggled element fixed this for me. If you wish to use padding then you may also set the box-sizing to border-box.

Relative positioning is not required but you may wish to use overflow: hidden to clear the floated elements.

Answer 6

setting the height/width of the component you want to slide fixes a bug that causes "jumpyness" using a line like (reference):

$('#slider').css('height', $('#slider').height() + 'px');