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

Turning off auto will work... (with any string besides auto or fill) such as the solution telling to use "panel". But...

That is the same as putting in any garbage string for "heightStyle". The "heightStyle" you are looking for is "content".

• http://api.jqueryui.com/accordion/#option-heightStyle
• https://github.com/jquery/jquery-ui/blob/master/tests/unit/accordion/options.js
• https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js

(values for option "heightStyle" in jQuery UI 1.12)

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

Example: https://jsfiddle.net/qkxyodpq/5/

Hope that helps.