Toggle slide help

[ClearlyPixelate]

I'm pretty new to coding so please go easy on me and help me out here. I'm just trying to do a toggle sliding parent/child menu with an image being the toggle command. I can get it to slide down but sliding back up...not so much. In Firefox the image goes away completely leaving the user unable to scroll back up. In Safari and IE the image, after sliding down, gives an error. Any help is always appreciated.

Here's the js:

var timerlen =5;
var slideAniLen = 500;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(did){

if(moving[did])
return;

if(document.getElementById(did).style.display != "none")
return;
moving[did] = true;
dir[did] = "down";
startslide(did);

}

function slideup(did){
if(moving[did])
return;

if(document.getElementById(did).style.display == "none")
return;

moving[did] = true;
dir[did] = "up";
startslide(did);
}

function startslide(did){

obj[did] = document.getElementById(did);
endHeight[did] = parseInt(obj[did].style.height);
startTime[did] = (new Date()).getTime();

if(dir[did] == "down"){
obj[did].style.height = "1px";
}
obj[did].style.display = "block";
timerID[did] = setInterval('slidetick(\'' + did + '\');',timerlen);
}

function slidetick(did){
var elapsed = (new Date()).getTime() - startTime[did];

if (elapsed > slideAniLen)
endSlide(did)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[did]);
if(dir[did] == "up")
d = endHeight[did] - d;

obj[did].style.height = d + "px";
}

return;
}

function endSlide(did){
clearInterval(timerID[did]);

if(dir[did] == "up")
obj[did].style.display = "none";


obj[did].style.height = endHeight[did] + "px";

delete(moving[did]);
delete(timerID[did]);
delete(startTime[did]);
delete(endHeight[did]);
delete(obj[did]);
delete(dir[did]);

return;
}


function toggleSlide(did,iid)
{
if(document.getElementById(did).style.display == "none")
{
slidedown(did);
document.getElementById(iid).setAttribute('src','Images/remove.jpg');

}
else
{
slideup(did);
document.getElementById(iid).setAttribute('src','Images/insert.jpg');
}
}


Here is the html:

<h3><img src="Images/insert.png" id="insert1" align="absmiddle" onClick="toggleSlide('div1',this.id);"> What a <br />
browser IS:</h3>
<div id="div1" style="display:none; overflow: hidden; height: 200px;margin:10px;">
- A program that lets you view, or <em>browse</em>, websites from the internet.<br /><br />
- A program that helps you organize and save web pages, browse email, and access media.
</div>

<h3><img src="Images/insert.png" id="insert2" align="absmiddle" onClick="toggleSlide('div2',this.id);"> What a <br />
browser is NOT:</h3>
<div id="div2" style="display:none; overflow: hidden; height: 200px;margin:10px;">
- Operating System, like Windows or Mac. These help you organize and view files on your computer.<br /><br />
- Search Engine, like Google or Yahoo. These help search the web.
</div>

<h3><img src="Images/insert.png" id="insert3" align="absmiddle" onClick="toggleSlide('div3',this.id);"> Browser Comparisons</h3>
<div id="div3" style="display:none; overflow: hidden; height: 50px;margin:10px;">
<div>- <a style="color: #b2b2b2" href="http://en.wikipedia.org/wiki/Comparison_of_web_browsers">Comparison tables</a></div>