Question

I need a div B on my website to update dynamically according to the run time changing height of another div A. div A uses the jquery slideToggle() [on several divs inside the div A], but div B should only be changing (at the same time) to match the current height of div A. panel_toggle1 and panel1 are contained inside div A:

$(document).ready(function () {
    $("#panel_toggle1").click(function () {
        $("#panel1").slideToggle("slow", function () {
            var divAheight = $("#divA").height();
            $("#divB").animate({ height: divAheight }, "slow");
        });
    });
});

The above code does basely what I wanted, however, due to the callback(), it waits for the slideToggle() to finish before doing the slide effect on the other div (I was forced to do this because sliteToggle() does not spit out the final height() of div A until it finishes).

Is there a way to do this so that both div A and div B update smoothly at the same time?
i.e. Is there a way to get the height slideToggle() will update div A before it finishes (so that I can just call .animate() on div B the same time as on div A)?

Note: I don’t use fixed heights for any divs in the CSS, I would like to keep it simple

Alternatively, is there a way I can keep div B to match div A‘s height with just CSS?

Answer 1

If you are able to set a fixed target height of your divA, the solution would be trivial, you’d just need to set your animations to run simultaneously, e.g. by setting queue=false.

Since it seems like you want to run these animations simultaneously without knowing the resulting height of the original animation, a workaround is to use two animations to acheive the effect:

var $divB = $("#divB");
$divB.animate({
   height: '600px' // some arbitrary height approaching target height
}, { duration: 5000 /* longer than the next animation */, queue: false });
$("#panel1").slideToggle({
   duration: 'slow', 
   queue: false,
   complete: function () {
       var divAheight = $("#divA").height();
       // stop the animation and begin another with the correct target height
       $divB.stop().animate({ height: divAheight }, "slow");
   }
});

Here, both divs begin to animate at the same time. When the slideToggle animation completes, the code stops the height animation of divB and begins a new height animation of divB = height of divA. Kinda hacky, but you have to wait until the first animation completes to get the updated height.

The other option would be to perform a calculation to get the height of the result of the slideToggle and then run simultaneous animations:

var newHeight = $("#divA").height() - $("#panel1").height(); 
var $divB = $("#divB");
$divB.animate({
   height: newHeight + 'px'
}, { duration: 'slow', queue: false });
$("#panel1").slideToggle({
   duration: 'slow', 
   queue: false
});