jQuery UI accordion with autoHeight=true has unnec

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

I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.

.ui-accordion .ui-accordion-content{
height:auto!important;
}

Answer 2

try this

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

Answer 3

Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);

Answer 4

I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:

http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/

For those lazy few who don't want to click, the short answer is:

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

in the accordion's CSS

Answer 5

This works for me:

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}

Answer 6

using this combo options works for me, 1.current version of jquery/ui

$( '#x' ).accordion({
    autoHeight: false,
    clearStyle: true
});