How can you adjust the height of a jQuery UI accordion?

Question

In my UI I have an accordion setup like this:

    
Section 1
    
...content...

    //          


        
      

Answer 1

Use heightStyle option to control the height of the accordion and each panel.

$("#accordion").accordion({
  heightStyle: "content"
});

Possible values:

1. "auto": All panels will be set to the height of the tallest panel.
2. "fill": Expand to the available height based on the accordion's parent height.
3. "content": Each panel will be only as tall as its content.