Fixing vertical jump at end of jQuery slideDown an

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 could look at it and suggest a solution, it will stop me pulling any more of my hair out!

Here is a a link to my test page (all my code [css, js etc.] is in one file for ease) : Vertical Accordion

Answer 1

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.

Answer 2

I was able to fix my problem just by using overflow: auto or overflow: hidden. I think this works because it ignores the height of the element and will show whatever it can. As long as there isnt a small height it should be able to show everything but adding the overflow property allows it transition more smoothly because it is not calculating the height.

Answer 3

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.