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.