How can you adjust the height of a jQuery UI accordion?
Solution 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.
Solution 2
autoHeight was deprecated in 1.9, and removed in 1.10.
Use:
$('#id').accordion({heightStyle: 'content'});
to auto size your inner div.
UPDATE:
I see that this is still quite an active post, so I decided to make sure my answer is still valid. It looks like this may no longer work in jQuery UI 1.11. It notes that the [content] property has been deprecated, and to use [panel] instead. Making the code snippet now look something more like this:
$('#id').accordion({heightStyle: 'panel'});
I HAVE NOT YET TESTED THIS, JUST FOUND, AND WILL RETURN AND REMOVE THIS COMMENT WHEN I HAVE TIME TO TEST
Solution 3
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 });
Solution 4
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.
Solution 5
Setting the DIV's height will do the trick.
$(document).ready(function() {
$("#accordion").show().accordion({
autoHeight: false
});
$("#accordion div").css({ 'height': 'auto' });
});
KallDrexx
Updated on November 05, 2020Comments
-
KallDrexx over 3 years
In my UI I have an accordion setup like this:
<div id="object_list"> <h3>Section 1</h3> <div>...content...</div> // More sections </div>
The accordion works properly when it is first formed, and it seems to adjust itself well for the content inside each of the sections. However, if I then add more content into the accordion after the .accordion() call (via ajax), the inner for the section ends up overflowing.
Since the accordion is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordions with scrollbars inside with almost no viewing area.
I have attempted to add min-height styles to the object_list div, and the content divs to no avail. Adding the min-height to the inner divs kind of worked, but it messed up the accordion's animations, and adding it to the object_list div did absolutely nothing.
How can I get a reasonable size out of the content sections even when there is not enough content to fill those sections?
-
ICodeForCoffee about 14 yearsYou still have to set the fillSpace: true and change the container height in order to make .resize() work.
-
KallDrexx about 14 yearsI don't really understand why autoHeight = false makes it work (seems like it should behave oppositely) but it worked. Cheers!
-
Admin almost 12 years@ICodeForCoffee I have same query...where do i need to write the //getter and setter code
-
Jeff Noel almost 12 years@pradnya directly into your javascript portion of your accordion. You just get the attribute/option autoHeight and set it to be false.
-
Rachel over 11 yearsThanks, this worked for me however I needed to use
.accordion("resize")
instead of.resize()
-
nullability over 11 yearsNote that this method was deprecated in 1.9 and has been removed in 1.10. You should now use
.accordion("refresh")
instead. -
nullability over 11 yearsThis option was deprecated in 1.9 and combined with the
clearStyle
andfillSpace
options. You should now use the newheightStyle
option. See my answer for more info. -
Andrew about 11 years@nullability's worked for me. The "heightStyle" attribute is key for v1.10+
-
jyoseph over 10 yearsThe "refresh" solution solved my problem as I was loading content into the accordion after it was initialized.
-
Henry Ruhs over 10 yearscorrect answer for the latest versions, I wonder why this is not the default behaviour...
-
AntonioCS about 9 yearsI just started using this plugin and this option did fix the issue I was having with jqueryUI setting the height of the content to the highest panel. Thanks
-
Silvan almost 9 yearsin version 1.11.4 I still needed in the definitions under "options":
heightStyle: "content",
to fix the standard height 500px. Thanks! -
Robin about 7 yearsI just used heightStyle: 'content' and it works very well so the heights of the panels are set based on their content. heightStyle: 'panel' works as well.
-
phyatt about 6 yearsThank you for your post. I double checked the docs, and
panel
doesn't exist... See my answer below for more details. stackoverflow.com/a/49077271/999943 -
phyatt about 6 years
'heightStyle': 'content'
works. See stackoverflow.com/a/49077271/999943 -
D_K about 5 yearsthis should be marked as the answer, as the currently marked one stackoverflow.com/a/2841187/158328 does not work anymore.