CODEWITHSUNDEEP
jqueryheightaccordion
Craig Jonathan Kristensen
Craig Jonathan Kristensen

Reputation: 737

Jquery accordion height:100%

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:

https://i.sstatic.net/6kJjY.jpg

https://i.sstatic.net/dOLtL.jpg

Upvotes: 7

Views: 21937

Answers (5)

Manvel
Manvel

Reputation: 808

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 ..
    ...
});

Upvotes: 1

Mottie
Mottie

Reputation: 86413

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");
});

Upvotes: 8

Marek Kowalski
Marek Kowalski

Reputation: 1792

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,
    });

Upvotes: 2

Labanino
Labanino

Reputation: 3960

I had the same issue and:

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

fixed it, no need for more javascript.

Upvotes: 0

Imran Butt
Imran Butt

Reputation: 306

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.

Upvotes: 29

Related Questions