<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var minheight = 20;
var maxheight = 300;
var time = 500;
var timer = null;
var toggled = false;
window.onload = function () {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px';
controler.onclick = function () {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight : minheight;
var disp = height - parseInt(slider.style.height);
timer = setInterval(function () {
var instance = (new Date()).getTime() - init;
if (instance < time) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + '</b><br /> Current Time : <b>' + instance + '</b>';
} else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' : ' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
}, 1);
};
};
</script>
</head>
<body>
<h1>
test
</h1>
<input type="button" id="slide" value=" Slide Down " />
<span id="log" style="position: absolute; left: 10px; top: 150px;"></span>
<br />
<div id="slider" style="background-color: green;">
content goes here
</div>
<div style="height: 20px; 100%; background-color: Gray;">
</div>
</body>
</html>