CODEWITHSUNDEEP
phpjqueryhtmlresizeaccordion
Vincent Monteil
Vincent Monteil

Reputation: 578

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 ! :)

Upvotes: 1

Views: 191

Answers (2)

Vincent Monteil
Vincent Monteil

Reputation: 578

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

Upvotes: 1

hcham1
hcham1

Reputation: 1847

You can bind to the Activate event

For example here is how you can use the activate event to scroll to top:

   $("#accordion").accordion({
  active: false,
  collapsible: true,
  heightStyle: "content",
  activate: function (event, ui) {
     if (ui.newHeader.length > 0) {
        var offset = ui.newHeader[0].offsetTop - 20;
        var bodyOffset = $(document).scrollTop();
        if (bodyOffset > offset) {
           $('body,html').animate({
              scrollTop: offset
           });
        }
     }
  }

Upvotes: 1

Related Questions