Grow your CSS skills. Land your dream job.

[SOLVED] .slideToggle jump/skipping

  • # January 16, 2010 at 10:52 pm

    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;
    });
    });
    # January 19, 2010 at 2:54 am

    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?

    # January 19, 2010 at 3:23 am

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".