Jquery accordion height:100%

jquery height accordion
Craig Jonathan Kristensen picture Craig Jonathan Kristensen · Jan 28, 2012 · Viewed 21.4k times · Source

I'm looking to create an accordion style website with 3 menu item that fill 100% of the window when expanded. I can find a lot of different accordions, but none that work properly with height: 100%

Any ideas?

Here is the general layout:

http://i.imgur.com/GLyTX.jpg

http://i.imgur.com/hOUrO.jpg

Answer

Imran Butt picture Imran Butt · Nov 27, 2012 
jQuery( "#accordion" ).accordion({
   collapsible: true,
   heightStyle: "content"
});

It will work and if your are using some combo or widget whose size increases after selection or due to any action the size of the accordion increases than by handling that event you can simply call the following;

jQuery( "#accordion" ).accordion( "resize" );

to adjust your accordion.

Related questions

How do you get the rendered height of an element?

How do you get the rendered height of an element? Let's say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. How do you …

Read More
jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
jquery get height of iframe content when loaded

I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe? I am asking this because I can't …

Read More