jQuery UI Accordion Jumpy When Opened

Question

I have an accordion widget on my page that expands past where it should stop when animating open (snapping back to the correct size at the end of the animation), and snaps to this same extended-size when it begins to animate closed. In my case, the accordion content should expand to 150px, but I have watched it animate in Chrome's Inspect Element window and seen it go to 185px briefly.

I have seen others suggest that padding and/or margins may be fooling jQuery when it makes a size calculation when changing the accordion section to position: absolute briefly to make the calculation.

http://jsfiddle.net/shadowycore/T5fnZ/1/

Any help at all would be greatly appreciated.

Answer 1

I had the same problem and after a few hours I finally managed to fix it by adding the following CSS:

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

I hope this helps

Answer 2

Overflow:auto is the KEY!! If you check the jquery accordion example you'll notice theirs does not jump and I found that it was down to the overflow:auto style on the .ui-accordion-content class.

So all you should need to do is add the overflow:auto style to the content class.

.ui-accordion .ui-accordion-content{
  overflow:auto;
}