jQuery animate height
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.
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/