Всем большое спасибо! вижу многому нужно еще учится))
я тут похимичил и вот что в итоге получилось...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoL</title>
<style>
.post{
width: 500px;
height: 40px;
background: #666;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<script>
var post;
var i = 0;
var post = document.querySelectorAll(".post");
while(document.querySelectorAll(".post")[i]){
post[i].myClick = new Post(post[i]);
post[i].onclick = post[i].myClick.do();
i++;
}
function Post($this){
this.do = function(){
var startH = $this.clientHeight;
var tumbler = false;
var n = 0;
var tname;
return function(){
h = $this.clientHeight;
tumbler = !tumbler;
n++;
if(tumbler){
clearTimeout(tname);
tname = setInterval(function(){
if(100 <= h) clearTimeout(tname);
$this.style.height = h+"px";
h +=1;
},10);
}else{
clearTimeout(tname);
tname = setInterval(function(){
if(startH >= h) clearTimeout(tname);
$this.style.height = h+"px";
h -=1;
},10);
}
}
};
};
</script>
</body>
</html>