Menu script problem

[gpig]

<script language="javascript">
<!--
//Expands and contracts the menu (if in Internet Explorer 4.0 or higher)
function change() {
if(!document.all)
return
if (event.srcElement.className=="expandable"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
if (event.srcElement.className=="expandable2"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
}
document.onclick=change
//-->
</script>

I got this from somewhere on the internet, can't remember where.
This is for a menu system. When you click a hyper link, the menu will contract or expand to reveal the sub-hyperlinks in that section. Exp: Products with hyperlinks of diff products underneath it.

It works with tables, so you get markings like this:
<td class="mainsection"><a class="expandable" href="#">Products</a>
<p class="subsection" style="display:none">
<a href="new.htm">product 1</a>
</p>

The mainsection and subsection I think is used for referal and css.
expandable for the main section
expandable2 for a subsection.

My problem is...I have diff sections: products, services ect. When I click on a section, I want the other to contract, otherwise the menu just gets to big...but how, I don't know much about javascript.
Maybe giving each section a diff class name, aswell as in the script. But how do you find out the source element, like above, what is variable x?
Will it be some wierd referal?

Thanx