I just cant seem to work ou how to get color into only the second stage like: chat should be black but teen and pool party should be yellow




Heres the code:


<html>
<head>
<style type="text/css">
<!--
#foldheader {cursor:hand;}
#foldsubheader {cursor:hand;text-indent:10px;}
#foldinglist {text-indent:10px;}
#subfoldinglist {text-indent:20px;}
-->
</style>



<script language="JavaScript1.2">


var head="display:''"

function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader" || event.srcElement.id=="foldsubheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {

var head = "display='none'"
nested.style.display=''
event.srcElement.style.listStyleType="circle"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleType="square"
}
}
}

document.onclick=change

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


<ul style="list-style-type:square;">
<li id="foldheader" style="font-size:medium">Chat
<SPAN id="foldinglist" style="display:none">

<li id="foldsubheader">Teen
<SPAN id="foldinglist" style="display:none">

<SPAN id="subfoldinglist">[*]Music Chat[*]Games Chat[*]Regular Chat[*]Jokes Room[*]Special (requires membership)
</SPAN>

</SPAN>

<li id="foldsubheader">Members Rooms
<SPAN id="foldinglist" style="display:none">

<SPAN id="subfoldinglist">[*]Regular Chat[*]Site Chat
</SPAN>

</SPAN>

<li id="foldsubheader">Pool Party
<SPAN id="foldinglist" style="display:none">

<SPAN id="subfoldinglist">[*]Hawaii[*]Jamaca[*]My House[*]Bali[*]First In Gets To Choose
</SPAN>
</SPAN>

</SPAN>

<li id="foldheader" style="font-size:medium">Members
<SPAN id="foldinglist" style="display:none">
[*]Members List[*]Become A Member[*]Members Chat[*]What Do Members Get?[*]Main Members
</SPAN>

<li id="foldheader" style="font-size:medium">About Us
<SPAN id="foldinglist" style="display:none">

<SPAN id="foldinglist">[*]Our Goal[*]What We Do
</SPAN>

</SPAN>

<li id="foldheader" style="font-size:medium">Special Offers
<SPAN id="foldinglist" style="display:none">

<SPAN id="foldinglist">
[*]All
[*]Music
[*]Other

</SPAN>

</SPAN>

<li id="foldheader" style="font-size:medium">Contact Us
<SPAN id="foldinglist" style="display:none">

<SPAN id="foldinglist">
[*]Email Us
[*]What Could We Do Better?
[*]What Do You Like?
</SPAN>

</SPAN>

<li id="foldheader" style="font-size:medium">Links
<SPAN id="foldinglist" style="display:none">

<SPAN id="foldinglist">
[*]Link To Us
[*]Our Links
</SPAN>
</SPAN>[/list]
</body>
</html>