Question

I’ve gone ahead and created a jquery accordion, when its opening it keeps jumping. I thought this may have been a margin/padding problem on the .content div but after removing it this didn’t appear to be the problem. I can’t see what else will be causing the problem.

I’ve gone ahead and uploaded this so you guys can take a look

http://sites.lukespoor.com/accordion/

I have taken a look at other threads and some said to apply

display:block;

to the li etc but this didn’t solve my problem 🙁

Any help is very appreciated.

Answer 1

While accordion animates things, it giving a position:absolute to the div.content for a fraction of time, while calculating the height.
At this time the div.content takes a width more than the li, ending at end of the body. So the height calculated is wrong, This can be seen if you just try absolute positioning for .content.

The solution is to make the parent li as relative positioned, so even when div.content is set to absolute while calculating height, it takes the width of parent li, and you get the correct height.

.accordion li {
    border-bottom: 1px dotted #D4D4D4;
    display: block;
    position: relative;
}