[*MO*]

Good day everyone

I've got a small javascript problem. if you have a look on my site, http://www.entersite.co.za, you'll see there are 2 links on the left. Gallery 1 and Gallery 2. When you click either one, the right side panel will expand.

eg : Click Gallery 2, right side will expand with gallery 2 pictures. When I click gallery one, it will collapse, and then I have to click it again to expand the right side with pics from gallery 1.

I want it, so that when I click gallery 1, that the panel will shrink, and then expand again to show pics from gallery 1.

any help would be great. or an example of a script that does this will also help.

I'm not using divs or layers. I'm just using a script that increases the <td> height.

Code:

 <script language="JavaScript" type="text/javascript">
 
	 var resizeIntervalId = null;
 
	 function startResize(id, height)
	 {
		 clearInterval(resizeIntervalId);
		 resizeIntervalId = setInterval("resize('" + id + "', " + height + ");",1);
	 }
 
function slide(id) {
var element = document.getElementById(id);
 
if(parseInt(element.style.height) == 100) {
startResize(id, 0);
if(parseInt(element.style.height) <= 90) {
	alert("here");
 
	startResize(id, 100);
}
 
} else {
startResize(id, 100);
 
}
}
	 function resize(id, height)
	 {
 
		 var element = document.getElementById(id);
		 var nextSize;
		 if(parseInt(element.style.height) == height)
		 {
			 clearInterval(resizeIntervalId);
			 return;
		 }
		 else if(parseInt(element.style.height) > height)
		 {
			 nextSize = parseInt(element.style.height) - 10;
		 }
		 else
		 {
			 nextSize = parseInt(element.style.height) + 10;
		 }
		 element.style.height = nextSize + "px";
	 if((parseInt(element.style.height) == height)&&(parseInt(element.style.height) > 1)) {
	 document.getElementById("imageGallery").innerHTML = "Test"
	} else {
	 document.getElementById("imageGallery").innerHTML = ""
	}
	 }
 
	 </script>
 
<table>
	<td>
	<a href="#" onClick="javascript:slide('slider');">Gallery 1</a>
	<br>
	<a href="#" onClick="javascript:slide('slider');">Gallery 2</a>
</td>
<Td id="slider" style="width:100px; height:0px; background-color:white;" nowrap>
		 <div id="imageGallery"></div>
		</TD>
</table>

any help would be great. Thanx