I want to use the effect of slideDown() for the first div to show it, starting from the dynamically generated height of last div to a height dynamically generated by its content within?
In the code bellow the part with the problem is .animate({'height':'200px'} / .animate({'height':'100px'} , the value 200px and 100px should be dynamically generated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Down</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
div {background:#de9a44;width:80px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="display: none">
In pellentesque risus sit amet magna consectetur nec consequat eros ornare.
</div>
<div>Vivamus placerat eleifend rutrum</div>
Click!
<script type="text/javascript">
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
var height = $("div:last").height();
$("div:last").hide();
$("div:first").height(height);
$("div:first").animate({'height':'200px'},"slow");
} else {
var height = $("div:first").height();
$("div:first").hide();
$("div:last").height(height);
$("div:last").animate({'height':'100px'},"slow");
}
});
</script>
</body>
</html>