CODEWITHSUNDEEP
jqueryhtmljquery-animateheighttoggle
Quaking-Mess
Quaking-Mess

Reputation: 525

Jquery: toggling 2 div heights inside 1 table cell

example diagram

So I have 2 divs inside a table cell. 1 div is above and 1 is below. The one on the bottom is invisible and so the top div takes up the entire height of the table cell. When a button is clicked the bottom div becomes visible and the top div reduces it's height to make room for the bottom div. And so this toggles when button is clicked again the bottom div hides and top div takes up the cell height.

This is what I've got but it's a fail:

 $('#button').click(function(){

   $('#bottomdiv').toggle(function(){
      $("#topdiv").animate({height:250},200);
   },function(){
      $("#topdiv").animate({height:400},200);
   });

});

Thank you for any help, jsfiddle demo greatly appreciated!

Upvotes: 0

Views: 224

Answers (2)

jacobq
jacobq

Reputation: 11587

You're close -- I think you just need to change your "click" handler to be "toggle". For example: (JS Fiddle)

jQuery(document).ready(function($) {
     $('#button').toggle(function () {
         // Show bottom
         $("#topdiv").animate({
             height: 400
         }, 200);
         $("#bottomdiv").slideUp();
         //console.log("bottom shown:", $("#bottomdiv"));
     }, function () {
         // Hide bottom
         $("#topdiv").animate({
             height: 250
         }, 200);
         $("#bottomdiv").slideDown();
         //console.log("bottom hidden:", $("#bottomdiv"));
     });
});

Upvotes: 1

JanHocevar
JanHocevar

Reputation: 199

$('body').on('click', '#button', function(){
  $('#topdiv').animate({
    height : '250px'
  }, {
     duration : 200,
     complete : function(){
       $('#bottomdiv').animate({
          height: '400px'
       }, 200);
     }
  });
});

Upvotes: 0

Related Questions