Fixing vertical jump at end of jQuery slideDown animation

Question

I am new to Jquery but have written a simple vertical accordion. It seems to to the job I require, but at the end of the slide down there is a visible jerk.

If anyone co

Answer 1

For reference in case somebody else comes across this problem, the following worked for me:

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

I don't really have time to investigate the details of why this fix works, but thought I'd share anyway.

Answer 2

In your custom code, I got rid of the 'jump' by making a small change in the CSS and specifying the height of the p tags within the accordion.

Since you hide them all via script, before you do:

$(".accordion p:not(:first)").hide(); 

maybe you could walk through and get the calculated heights of each piece and add that to each items style, thereby eliminating that "jerk" you get at the end.

Something along these lines:

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

Edit

I went ahead and downloaded a copy of your page and tested this, and it seems to work fine in a few quick browser tests, so here's your revised vaccordian.js:

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL;DR - by setting an explicit height on each 'opening' part of the accordion, it removes the jerky animation. so we set those heights via script.