JQuery accordion height: 100%

Question

I am looking to create an accordion style website with 3 menu items that fill 100% of the window when expanded. I can find many different accordions, but none of them work with height: 100%

Any ideas?

Here is a general layout:

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

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

Answer 1

jQuery( "#accordion" ).accordion({ collapsible: true, heightStyle: "content" }); 

It will work, and if you use any combo or widget, the size of which increases after selection or due to some action, the size of the accordion increases than when processing this event, you can simply call the following:

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

to tune the accordion.

Answer 2

You can do this with jQuery UI Accordion ( demo ):

CSS

 html, body { height: 100%; padding: 0; margin: 0; overflow: hidden; } .accordion { height: 100%; } 

script

 $(function(){ $( ".accordion" ).accordion({ fillSpace: true }); $(window).resize(function(){ // update accordion height $( ".accordion" ).accordion( "resize" ) }); }); 

---

For newer versions of jQuery UI Accordion (v1.12.1 +), set heightStyle to fill , use "refresh" to update and set html and body height to 100% ( demo ).

CSS

 html, body { height: 100%; padding: 0; margin: 0; overflow: hidden; } 

script

 $(".accordion").accordion({ heightStyle: "fill" }); $(window).resize(function() { // update accordion height $(".accordion").accordion("refresh"); }); 

Answer 3

I am using 1.8.21 from jquery-ui, and heightStyle: "content" does not work for me. I read the code and found the following solution:

  $('.accordion').accordion({ "autoHeight": false, }); 

Answer 4

In some versions of heightStyle: "content" does not work because jquery.ui.js does not include the variable "heightStyle", so you can set the default variable manually in jquery.ui.js .

Find in code:

 $.extend( prototype.options, { heightStyle: null, // remove default so we fall back to old values ... .. some code .. ... }); 

Change to:

 $.extend( prototype.options, { heightStyle: "content", // remove default so we fall back to old values ... .. some code .. ... }); 

Answer 5

I had the same problem and:

 .collapse.in { height: 100%!important; } 

fixed, no javascript needed anymore.