jQuery UI accordion with autoHeight=true has unnecessary scrollbar on non-default panes

Question

I am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.

You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.

If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.

Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).

Answer 1

try this

http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion

Answer 2

I faced similar problem, for me the following change in CSS worked.

.ui-accordion .ui-accordion-content{ overflow:visible !important; }