jQuery - getting a height and re-using it

Question

Hi All

Can someone explain to me how to get the height of one element, and then re-use it elsewhere on another element, using jQuery?

For example, to have 2 divs, 1 & 2, and to get the height of div 1, then have an on-click event on div 2 that animates it to the same height as div 1.

Cheers

Answer 1

$('#div2').click( function () {
  $('div2').height( $('#div1').height() )
}
);

Answer 2

This would work:

$('#div1').click(function() 
{
    $(this).animate({
        height: $('#div2').height()
    });
});

Also, check the docs for more options: http://docs.jquery.com/Effects/animate

Answer 3

This is very basic jQuery, maybe you should have a look at the manual and API before asking this question?

An example in the API can be found at CSS > Height and Width > height(val):

$("div").one('click', function () {
  $(this).height(30)
         .css({cursor:"auto", backgroundColor:"green"});
});

Answer 4

Try this:

<div id="div-one" style="height:100px; background: #fb0">first div</div>        
<div id="div-two" style="height:50px; background: #fb0">second div</div>

<script type="text/javascript">
    jQuery("#div-two").click(function() {
        var desiredHeight = jQuery("#div-one").height();
        jQuery(this).animate({height: desiredHeight}, 1000);
    });
</script>