Div show/hide slowly

How can i make my div show/hide slowly? Please view source to view the javascript that i am using to show/hide the div.

http://www.nrccua.org/testing/showhide/criteria.asp

also to toggle + and - image should i do it like

 
objPic.src = objPic.src.replace("btn_action_plus.", "btn_action_minus.");
objPic.src = objPic.src.replace("btn_action_minus.", "btn_action_plus.");

or pre-load the images first and then show it like this

 
var picMinus   = new Image();
var picPlus	= new Image();
picMinus.src    = '/pics/btn/btn_action_minus.gif';
picPlus.src	= '/pics/btn/btn_action_plus.gif';
  
document.images['pic'+CAT].src = picMinus.src;
document.images['pic'+CAT].src = picPlus.src;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> NRCCUA Pre-Order Estimates </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="/styles/main.css" type="text/css">

<style type="text/css">
<!--
.divestimateout{
	margin-top: 10px;
	line-height: 18px;
}
.divestimateinside{
	margin-top: 5px;
    width:200px;
    border: 1px solid #333;
	padding: 5px;
}
A.estimate:link {
  color:#800000;
  text-decoration: none;
  font-size:14px;
  line-height: 18px;
  font-weight:bold;
  }
A.estimate:visited {
  color:#800000;
  text-decoration: none;
  font-size:14px;
  line-height: 18px;
  font-weight:bold;
  }

A.estimate:hover {
  color:#800000;
  text-decoration: none;
  font-size:14px;
  line-height: 18px;
  font-weight:bold;
  }
-->
</style>



<script language="javascript">
<!--
var Speed=2;
var picMinus			= new Image();
var picPlus				= new Image();
picMinus.src 			= 'http://www.vicsjavascripts.org.uk/StdImages/Down1.gif';
picPlus.src				= 'http://www.vicsjavascripts.org.uk/StdImages/Up1.gif';
var zxcH,objCat,objPic,TO;

function showhide(CAT) {
 clearTimeout(TO);
 objCat = document.getElementById('div'+CAT);
 objPic = document.getElementById('pic'+CAT);
 if (objCat && objCat.style.display!='none') {
  if (!objCat.h){
   objCat.h=objCat.offsetHeight;
   objCat.style.display="none";
   objCat.style.overflow='hidden';
   objCat.style.height=(0)+'px';
  }
  else {
   Close();
  }
  document.images['pic'+CAT].src = picMinus.src;
  }
  else {
   objCat.style.display="block";
   document.images['pic'+CAT].src = picPlus.src;
   Open();
  }
}

function Open(){
 objCat.style.height=(parseInt(objCat.style.height)+Speed)+'px';
 if (parseInt(objCat.style.height)<objCat.h-Speed){ TO=setTimeout('Open()',10); }
}

function Close(){
 objCat.style.height=(parseInt(objCat.style.height)-Speed)+'px';
 if (parseInt(objCat.style.height)>Speed){ TO=setTimeout('Close()',10); }
 else {
  objCat.style.display="none";
 }
}

//-->
</script>

</head>
<body onload="showhide('SHOW')">
<div id="container">

<!-- Begin Main Table -->
<table class="main">
<tr>
<td class="leftnav">
  <!-- Begin SideNav -->

  <!-- End SideNav -->
</td>
<td class="content">
<!-- Begin Content -->
<p>Show hide</p>

<form name="frmCriteria" action="" method="post">

	<div class="divestimateout">
		<table border="0" cellspacing="0" style="border-collapse: collapse" width="100%">
			<tr>
				<td width="5%"><a href="javascript:showhide('SHOW')">
				<img border="0" width="14" height="14" src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" alt="toggle" name="picSHOW"></a></td>
				<td width="95%"><a href="javascript:showhide('SHOW')" class="estimate">Show Hide DIV Below</a></td>
			</tr>

		</table>
	</div>
	<div class="divestimateinside" id="divSHOW">
		div to show/hide when above image or text is clicked. When opened - image should display and when closed + image should display.
		Right now my div doesn't hide and instead of + image no image shows. When clicked again, minus image shows again.
	</div>

</form>
This is some text outside the divs.
<!-- End Content -->
</td>
</tr>
</table>

</div>
</body>
</html>

Thank You.

i have implemented your example, one problem though, first time when page is loaded - image displays but the block is not visible. When clicked now block displays but image is change to +. + image should display when block is closed. It is doing oppsite. onload event is there also. Can we take out onload event? on my page i will have more than one criteria. Eack criteria is a block that i need to show and hide. this testing example has only one block in it.

http://www.nrccua.org/testing/showhide/criteria.asp