CODEWITHSUNDEEP
jquery-uiaccordion
FireCrakcer37
FireCrakcer37

Reputation: 1026

jQuery UI Accordion child div sizes

I have an accordion on my page, and the child divs have different lengths of content in them. When the accordion displays, the first fold only has one line of text, but the div is taking up the same amount of space as the longest div does. Is there a way to make the child divs take up only as much space as they require when unfolded?

If this is too vague I can post some code to explain what I mean. Thanks for your help.

Upvotes: 2

Views: 765

Answers (1)

RTB
RTB

Reputation: 5833

If you want the accordion to dynamically resize to the height of the content that it contains you can implement the following code:

$( "#accordion" ).accordion( "option", "autoHeight", false ); // or true if you want to change back

Or use heightStyle:

Controls the height of the accordion and each panel. Possible values:

"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.

Code examples:

Initialize the accordion with the heightStyle option specified:

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

Upvotes: 4

Related Questions