Vincent Monteil Vincent Monteil - 3 months ago 31
HTML Question

Resize other elements on jQuery accordion event

I'm using a div and a table (inside of a container div) below the div on a html page.
The 1st div is an accordion

$( function() {
$( "#resizeableDiv" ).accordion({
collapsible: true,
active:false'
});
} );


Once the header gets clicked, the div collapses or expands. The table, which is below keeps stuck below the collapsed/expanded div.

What I would like to do is I would like the table container div height to increase when the 1st div collapses, and to get reduced when it expands, so the size of both the elements remains the same.

I did some research on the forums, tried to do it myself by putting height instructions inside of accordion({}) or function({}), but as long as I'm new to jQuery, it doesnt work at all.

I've been stuck with that for a while, so any help would be welcome ! :)

Answer

For those interested, here is the solution that I implemented. hcham1 answer is efficient as well.

$( function() { 
$( "#myDiv" ).accordion({
  collapsible: true,
  active:false,
  activate: function(event, ui) {
    if(ui.newHeader.text()!="") //Expanding (will be empty when the tab is collapsed
        $("#ScrollBody").animate({
        height: '-=420px'
        }, 1000);
    else //Collapsing
        $("#ScrollBody").animate({
        height: '+=420px'
        }, 1000);
}
});
});
Comments