Javascript slide

[*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

[robinwilson16]

Fixed it for you

It now differentiates between the galleries and displays different text depending upon which was clicked. It expands when you click a gallery and contracts if you click the same gallery again or if you clicked another gallery it contracts the old one then expands the new one.
The contents for each gallery can be modified at the top of the script.

Hope this is what you wanted.
Robin

Code:

<script language="JavaScript" type="text/javascript">
		 
		 var gall1 = "Gallery 1 Content Here";
		 var gall2 = "Gallery 2 Content Here";
		 var curnum = 0;
  var resizeIntervalId = null;
 
  function startResize(id, height, num)
  {
   
				 clearInterval(resizeIntervalId);
   resizeIntervalId = setInterval("resize('" + id + "', " + height + ", " + num + ");",1);
  }
 
function slide(id, num) {
var element = document.getElementById(id);
 
if(parseInt(element.style.height) == 100) {
		startResize(id, 0, num);
if(parseInt(element.style.height) <= 90) {
 startResize(id, 100, num);
		curnum = num;
}
 
} else {
startResize(id, 100, num);
curnum = num;
 
}
}
  function resize(id, height, num)
  {
				 var element = document.getElementById(id);
   var nextSize;
				 if(parseInt(element.style.height) == height)
   {
	if (curnum != num) {
						   clearInterval(resizeIntervalId);
						   startResize(id, 100, num);
						   curnum = num;
						   return;
						 } else {
						 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)&&(num == 1)) {
  document.getElementById("imageGallery").innerHTML = gall1
		 }
		 else if((parseInt(element.style.height) == height)&&(parseInt(element.style.height) > 1)&&(num == 2)) {
  document.getElementById("imageGallery").innerHTML = gall2
 } else {
  document.getElementById("imageGallery").innerHTML = ""
 }
  }
 
  </script>
 
<table width="100%" align="left">
 <td width="100">
 <a href="#" onClick="javascript:slide('slider', 1);">Gallery 1</a>
 <br>
 <a href="#" onClick="javascript:slide('slider', 2);">Gallery 2</a>
</td>
<Td id="slider" style="width:100px; height:0px; background-color:white;" nowrap>
   <div id="imageGallery"></div>
  </TD>
</table>