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

It looks like all the answers here are now using deprecated options.

With the latest version of jQuery UI (1.10.x), you should initialize your accordion with heightStyle: "fill" to get the intended effect..

$(".selector").accordion({ heightStyle: "fill" });

You can read more at the jQuery UI API docs here: http://api.jqueryui.com/accordion/#option-heightStyle

If your page dimensions change dynamically and you need to recalculate your accordion size, you should refresh your accordion using the refresh method:

$(".selector").accordion("refresh");

This is preferred as the resize method is now deprecated.

Answer 2

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.

Answer 3

for me doing following worked accurately.

$( "#accordion" ).accordion({
    autoHeight: false,

});

Answer 4

When you declare the accordion control div, you can put a height in the style tag for the div. Then you can set the fillSpace: true property to force the accordion control to fill that div space no matter what. This means you can set the height to whatever works best for you page. You could then change the height of the div when you add your code

If you want the accordion to dynamically resize to the content it contains as needed you can do the following trick posted on the jQuery UI website.

//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );

This means when you select an area with a lot of text, the accordion will recalculate it.

Answer 5

From the docs it sounds like you'll need to set

clearStyle: true

...and also

autoHeight: false

I believe that using clearStyle allows you to dynamically add content without Accordion getting in the way.

So try this...

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });