Need help to animate onclick drop down DIV

[javascriptnooob]

I'm using the below code to expand and collapse a DIV on alternative clicks

<script>
 function Tog(id){
var x=document.getElementById(id);
if(x) {
        if(x.style.display=='none') 
                                          { x.style.visibility='visible';
                                           x.style.display='block';
                                          }
          else{ x.style.visibility='hidden';
                  x.style.display='none';
               }
         }
                          }
</script>

<a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
<div id="togme">
Content inside this DIv will hide and show on alternative clicks
</div>

When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet.

I tried playing around with the below code

	
	

			
				<script>
function show() {

var curheight=0;

var fullheight=document.getElementById("hidden").offsetHeight;
while(curheight<fullheight) {
curheight=curheight+10;
document.getElementById("hidden").style.height=curheight+"px";
document.getElementById("hidden").style.display="block";
// SET DELAY HERE FOR EVERY INCREMENT IN VALUE OF NEW HEIGHT
}
}
</script>
<i onclick="show()" >Click me</i>
<div id='hidden'  style="display:none;">
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
</div>
			
		

Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this

[gusblake]

I think your code is OK but you're not using a timer, so the expansion of the div happens as quickly as the processor can work, which makes it look instant.

[javascriptnooob]

Help me bud, show me how.

[javascriptnooob]

Tried this, no luck,

function update(newheight){
document.getElementById("hidden").style.height=newheight+"px";
document.getElementById("hidden").style.display="block";
}
function show() {
var curheight=0;
var fullheight=document.getElementById("hidden").offsetHeight;
while(curheight<fullheight) {
curheight=curheight+10;
setTimeout("update(curheight)", 100);
}
}
</script>

[gusblake]

function show(id, fullheight) {
var div=document.getElementById(id);
var curheight=parseInt(div.style.height);
var newheight=curheight+10;
div.style.height=newheight+"px";
if(newheight<=fullheight) {
setTimeout("show('"+id+"',"+fullheight+")",100);
}
}

show('hidden',200) //200px

[javascriptnooob]

Thank you it worked, used visibility:hidden instead of 'display'