CODEWITHSUNDEEP
jqueryjquery-uijquery-pluginsaccordion
AnApprentice
AnApprentice

Reputation: 110960

JQUERY UI Accordion Resize on Window Resize?

I'm using the JQUERY UI Accordion module:

<script type="text/javascript">
$(function() {
    $("#sidebar_column_accordion").accordion({
        fillSpace: true,
        icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }
    });
});
</script>

By using the fillSpace option, the accordion takes up the entire height of the window which I want. Problem is it calculate the height on page load, and if the user resizes their browser, it does not adjust...

Is there a way to have the accordion recalculate the height/size when the browser window is resized?

Thanks

Upvotes: 12

Views: 16379

Answers (4)

Vincent
Vincent

Reputation: 2159

The other solutions posted did not work for me, though they were close.

Define your accordion using heightStyle:fill, like so:

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

Create a function to calculate and set the height. Note that I had to do both, set the height and then call refresh on the accordion. One won't work without the other. 

function calculateHeight(){
  var height = $('#maincontent').height();  // Or whatever height you want
  $('#sidebar_column_accordion').height(height);
  $('#sidebar_column_accordion').accordion("refresh");
}

Call this function on both page load and window resize.

calculateHeight();

$(window).resize(function () {
  calculateHeight();
});

Upvotes: 0

PetersenDidIt
PetersenDidIt

Reputation: 25620

$(window).resize(function(){
    $("#sidebar_column_accordion").accordion("resize");
});

In jQuery UI 1.9 the resize method was removed. The refresh method was added which is more robust and will work in this case also.

$(window).resize(function(){
    $("#sidebar_column_accordion").accordion("refresh");
});

Upvotes: 21

jonnow
jonnow

Reputation: 858

Set autoHeight: 'content' in the accordion decalaration. This will make the div use the native height of the content:

$('#accordion').accordion({
    autoHeight: 'content'
});

See here for more info: http://jqueryui.com/accordion/#no-auto-height

Upvotes: 0

Ethan Pelton
Ethan Pelton

Reputation: 1796

It looks like this has been updated to "refresh"

$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});

Upvotes: 4

Related Questions