Question

I have a jQuery accordion (jQuery 1.3.2, jQuery UI 1.7.2), with between 3-12 content panels.

Some of the content panels are large, and have lots of content. some are small, and have only a little.

When I expand any of them, the scrollbar on the div containing the accordion (it’s got css overflow: auto;) is set as if the largest of the panels is expanded.

Let’s say I have 3 panels. One has 3 lines of content, one has 20 lines, and one has 1000 lines. If I expand either of the first two, the scrollbar indicator gets very very tiny, and moves all the way to the top, even though there is nothing worth scrolling.

Is there a way to fix this?

It seems like autoHeight:false ought to do it, but that doesn’t work for me.

Answer 1

you need to have/set a fixed wrapper height and assign to it the overflow:auto; then put the accordion inside it!

<div id="accordion_wrapper">
   <ul id="accordion">
  <li></li>
 </ul>
</div>

the result should be similar to this:
http://jqueryui.com/demos/accordion/#no-auto-height

then for style the created overflow scrollbar use

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

that is very nice and work for overflow like a charm!