[SOLVED] .slideToggle jump/skipping

[noahgelman]

I for the life of me cannot figure this out. It is messing up in all browsers. I have one simple paragraph with a ‘read more’ button under it. When clicked, the 2nd and 3rd paragraphs slide down from under the 1st, pushing the button down and the button switches to ‘read less’, and when clicked again, they slide back up. Sliding up, it works fine and fluid, but when it slides down, before it reaches the bottom, it jumps. Even when I remove all the padding, it jumps.

HTML

Code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis convallis sollicitudin. Praesent sit amet enim arcu. Pellentesque id nibh sed lectus vehicula porttitor. Proin condimentum tellus nec risus venenatis ac egestas tortor ultricies. Suspendisse auctor, nisi nec dictum cursus, nibh quam sollicitudin enim, non volutpat erat purus quis est. Cras hendrerit faucibus massa, at vestibulum nibh fringilla eu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

read more

CSS

Code:

#method-tests {
padding:20px;
overflow:hidden;
}

.border {
border:1px solid #000;
padding:10px;
}

jQuery/java

Code:

$(document).ready(function() {
var $firstPara = $(‘div.border p:eq(0)’).siblings(‘p’);
$firstPara.hide();
$(‘span.more’).click(function() {
$firstPara.slideToggle();
var $span = $(this);
if ( $span.text() == “read more” ) {
$span.text(‘read less’);
} else {
$span.text(‘read more’);
}
return false;
});
});

[noahgelman]

Ok, with much much work, I’ve narrowed down the problem. The problem isn’t with the slideToggle code at all, the problem is that whenever an element with slideToggle has a width, it jumps and skips. How would you get around that?

[noahgelman]

SOLVED: Apparently, anytime slideToggle has a width, it jumps or skips (either up or down or both) and the way to solve it is to make the div or whatever element it is in position:relative and that resets the width as far as the slideToggle is concerned.

[Author]

Posts