Question

How can I get the height of element dynamically for animate()?

This is my code to reveal more hidden text in an element. The problem is that I have to fix the animate height (300px for instance) to a fixed number and the text is constantly changed so I don’t know how long it will be.

$('.toggle-slide').click(function() {

      var object = $(this);
      var object_target = $('.text-about');
      var target_height = object_target.height();

     object_target.animate({
        height:'300px'
      }, 1500 );


      return false;
 });

So I think the actual height of the element should be obtained dynamically then I can pass this parameter into animate().

But how can I get this dynamic height?

Or maybe you have other better ideas?

Here is my testing link.

Answer 1

$('.toggle-slide').click(function() {

      var object = $(this);
      var object_target = $('.text-about');
      var target_height = object_target.height('100%').height();

      object_target.height('200px');

      object_target.animate({
        height: target_height + 'px'
      }, 1500 );


      return false;
 });

I got it to work by first making it all visible, then taking the height, then putting back to 200px and animating 🙂

maybe a flicker on slower machines but its an idea