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

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.