Expand/Collapse script for multiple elements

I found a great little expand/collapse script at <a>http://www.blakems.com/archives/000087.html&lt;/a&gt;. I’m trying to get it to work for multiple elements on my site, so I’ve tried…


function storageCollapse() {
for (var i=0; i<storageCollapse.arguments.length; i++) {
var element = document.getElementById(storageCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
function serverCollapse() {
for (var i=0; i<serverCollapse.arguments.length; i++) {
var element = document.getElementById(serverCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}

and put in the (x)HTML


<div id="on" >
<a href="javascript: storageCollapse('expand', 'on');">
<li>Storage</li></a>	
</div>	
<div id="expand" style="display: none;">
<a href="javascript: storageCollapse('expand', 'on');">
<li>Storage</li></a>
				<ul id="sublist">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					</ul>
</div>
<div id="on" >
<a href="javascript: serverCollapse('expand', 'on');">
<li>Servers</li></a>	
</div>	
<div id="expand" style="display: none;">
<a href="javascript: serverCollapse('expand', 'on');">
<li>Servers</li></a>
				<ul id="sublist">	
					<li>1</li>
					<li>2</li>
					<li>3</li>
					</ul>
</div>

what am I doing wrong? I want to be able to expand and collapse “Servers” and “Storage” individually, without making the code too bloated or complicated. When I use this code, it seems to only expand “Storage” (the first one), every time.

ids must have a unique name



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
function Cng(obj){
 obj=document.getElementById(obj);
 if (obj.style.display=='none'){
  obj.style.display='block';
 }
 else {
  obj.style.display='none';
 }
}

//-->
</script>
</head>

<body>
<li onclick="javascript:Cng('sublist1');">Storage</li>
 <ul id="sublist1">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					</ul>

<li onclick="javascript:Cng('sublist2');">Whatever</li>
 <ul id="sublist2">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					</ul>




</body>

</html>


cool, I rejiggered a little for my purposes, and I’m working them a bit, and I’m thinking, is there any way to change the class of a li element when its clicked on? For example, changing the

obj.style.display='none'; 

line to something that would allow you to change the class of the li with “Storage” in it?


<a href="javascript: expandCollapse('storageList');"><li>Storage</li></a>
<ul  style="display: none;" id="storageList">