jQuery animate height

Question

I have a button and a div with inside some text:

Click me
Lot of text here....

Answer 1

The scrollHeight property of the DOM element could also give you the height you need.

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

Working example can be found at http://jsfiddle.net/af3xy/4/

Answer 2

You can store the height just before slimming it down to 30px on page load, for example:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Then in your click handler:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

So what this does is get the .height() (run this in document.ready) before the overflow: hidden it set, and stores it via $.data(), then in the click handlers (via .toggle() to alternate), we use that value (or 30) every other click to .animate() to.

Answer 3

This thread is not the newest, but here's another approach.

I have been dealing with the very same issue today and could not get it to work properly. Even with the correct height calculated with height: auto applied, the animation would not give me the correct results. I tried putting it in $(window).load instead of $(document).ready, which helped a little, but still cut off my last line of text.

Instead of animating the height itself, I was able to resolve the issue by adding and removing a hidden class to my div dynamically. If you use jQuery-UI, you can apply a duration to these effects. This seems to work in all browsers, too.

Here's a working exampe.