Question

I have two <div>‘s floated left within a parent <div>. Using jQuery, the div.will_slide_down will slide down at some point (using $("div.will_slide_down").slideDown()). When it is sliding down, the div.first‘s height should also increase to match the height of the div.second at the same time.

How can I do that?

 <div class="wrap">
      <div class="first" style="width: 200px; float: left;"></div>
      <div class="second" style="width: 700px; float: left;">
           <p>BlaBlaBla</p>
           <div class="will_slide_down" style="display: none">Some hidden text</div>
      </div>
 </div>

The only way I can think of is to run a function when the slideDown of the div.second is complete, but this will mess up the layout. It should happen at the same time.

Answer 1

I think the best way would be to use .animate() and the step function. The step function is fired at each ‘step’ of the animation. Something like this should do the trick:

$('div.will_slide_down').animate({height: 'show'}, {step: function(now, fx){
    var new_height = $('div.second').height;
    $('div.first').css('height', new_height);
}});