Jquery accordion height:100%

Question

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 1

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.

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 the heightStyle to fill , use "refresh" to update and set the html & 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 use 1.8.21 of jquery-ui, and heightStyle: "content" didn't work for me. I read through the code and I found the following solution:

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

Answer 4

In some versions heightStyle: "content" is not working, because jquery.ui.js is not include "heightStyle" variable, so you can set default variable manually in the 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 issue and:

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

fixed it, no need for more javascript.