Jquery 1.9 accordion height

Question

I use an accordion whose height is 400 pixels. I want the accordion to never exceed 400 pixels, but I also want the individual elements of the accordion to fit the size of their contents. I can get the entire accordion with a height of 400 pixels by setting "heightStyle" to "fill". In this case, each element of the accordion is the same size, if the contents of the element are larger than the default size, it becomes scrollable, but if the contents are smaller, you get a lot of empty space, which I do not want.

Of course, I can make each element the size of the content by setting "heightStyle" to "content", but in this case the extended accordion size can be more than 400 pixels. So what I want is a combination of “fill” and “content”, do you know how to get this behavior?

Thanks.

Answer 1

All you need to do is set the max-height and overflow properties in css. Here is a demo :

#accordion .ui-accordion-content { max-height: 400px; overflow-y: auto; } 

I set the demo max-height to 200px for demo purposes only.