jQuery UI Accordion - Each Panel Fit To Contents

Question

I'm using jQuery UI's Accordion http://jqueryui.com/demos/accordion/ and I'm trying to get it to fit the height of each panels contents.

The way it currently works is to fit the largest panels contents, but I would like it to resize based on which panel is open.

Also, is there a way to make one panel open instead of the top one by default? I'd like to have the bottommost panel open when the user loads the page.

Thanks in advance!

EDIT: I've tried putting height:auto !important; in the jquery-ui.css file on .ui-accordion .ui-accordion-content-active which does work, but results in a weird issue when closing an accordion, where one stays open while the other is opening.

Answer 1

To keep things current, it seems that for jquery UI version 1.9, the autoHeight has been replaced by heightStyle. http://api.jqueryui.com/accordion/#option-heightStyle

The way to do this after 1.9 would be $( ".selector" ).accordion({ heightStyle: "content"});

autoHeight still works under most circumstances, but I ran into difficulties in Chrome and Safari but not Firefox when I used autoHeight: false and my .ui-accordion-content included an image whose height was set to auto. Using heightStyle instead worked much better.

Answer 2

Ahh, found out they just have a setting for this! http://jqueryui.com/demos/accordion/#no-auto-height

So basically, just do this: $( ".selector" ).accordion({ autoHeight: false });