If statement to minimize and maximize image

I am new to this and I am pretty lost, basically I want the div to start out completely minimized at 0% height and then when I click the button that calls the function it should increase the size to 100%, once it is maximized I want it to set the height back to 0% when the button is clicked again. Heres what I have so far. I can get it to minimize and maximize itself but I can't get the height set correctly.

<SCRIPT language="javascript">


var y = 100;
var q = 5;
var f = 0;
var g = 0;


function changeheight(){
if(y>170&&g==0){g=1;return;}
if(y<101&&g==1){g=0;return;}
if(g)q=-5;if(!g)q=5;y=y+q;
e=document.getElementById("examplediv");
e.style.height = y + 'px';
t=setTimeout("changeheight();",0);

</SCRIPT>

Can anyone help me out, or is there an easier way to do this?

Replace 'yourElement' with the id of your image.


function changeHeight(){
var element = document.getElementById('yourElement');
if(element.style.height == "100%"){element.style.height = "0%";}
else{element.style.height = "100%";}
}



and set your images CCS style to your starting percentage as shown below.

<img src="abc.jpg" id="yourElement" style="height:100%;" />