JAVASCRIPT MASTER NEEDED, help w/ the collapsible menu reili gave me Options

[add1cted2f1re]

look at this:
http://phoenixf1re.melilyn.com/avatars.php


see the submenu things "fall out boy" and "panic! at the disco" (well, panic! at the disco doesnt show up at all)?

well i want those to appear when i click "music"... so that i have a sublink type thing

so you would click "Music" and then the subcategories would appear

i KNOW its gotta do with this part of the code

CODE

<script type="text/javascript">



var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
        if(el.style.display != "block"){ //DynamicDrive.com change
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="submenu") //DynamicDrive.com change
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

and just in case... my page's code for the menu:

CODE

<div class="menutitle" onclick="SwitchMenu('sub1')"><font size=2>MUSIC</font></div>
<span class="submenu" id="sub1">

<div class="subtitle" onclick="SwitchMenu('sub2')"><font size=2>Fall Out Boy</font></div>
<span class="submenu" id="sub2">
<img src="images/avatars/fob/1.jpg" hspace=1>
<img src="images/avatars/fob/2.jpg" hspace=1>
<img src="images/avatars/fob/3.jpg" hspace=1>
<img src="images/avatars/fob/4.jpg" hspace=1>
<img src="images/avatars/fob/5.jpg" hspace=1>
<img src="images/avatars/fob/6.jpg" hspace=1>
<img src="images/avatars/fob/7.jpg" hspace=1>
<img src="images/avatars/fob/8.jpg" hspace=1>
<img src="images/avatars/fob/9.jpg" hspace=1>
<img src="images/avatars/fob/10.jpg" hspace=1>
<img src="images/avatars/fob/11.jpg" hspace=1>
<img src="images/avatars/fob/12.jpg" hspace=1>
<img src="images/avatars/fob/13.jpg" hspace=1>
<img src="images/avatars/fob/14.jpg" hspace=1>
</span>

<div class="subtitle" onclick="SwitchMenu('sub3')"><font size=2>Panic! At the Disco</font></div>
<span class="submenu" id="sub3">
<img src="images/avatars/patd/1.jpg" hspace=1>
<img src="images/avatars/patd/2.jpg" hspace=1>
<img src="images/avatars/patd/3.jpg" hspace=1>
<img src="images/avatars/patd/4.jpg" hspace=1>
<img src="images/avatars/patd/5.jpg" hspace=1>
<img src="images/avatars/patd/6.gif" hspace=1>
<img src="images/avatars/patd/7.jpg" hspace=1>
<img src="images/avatars/patd/8.jpg" hspace=1>
<img src="images/avatars/patd/9.jpg" hspace=1>
<img src="images/avatars/patd/10.jpg" hspace=1>
<img src="images/avatars/patd/11.jpg" hspace=1>
<img src="images/avatars/patd/12.jpg" hspace=1>
<img src="images/avatars/patd/13.jpg" hspace=1>
<img src="images/avatars/patd/14.jpg" hspace=1>
<img src="images/avatars/patd/15.jpg" hspace=1>
<img src="images/avatars/patd/16.jpg" hspace=1>
<img src="images/avatars/patd/17.jpg" hspace=1>
<img src="images/avatars/patd/18.jpg" hspace=1>
<img src="images/avatars/patd/19.gif" hspace=1>
</span>

[add1cted2f1re]

i want it so u click the category, and then when you do that... the SUBcategories appear and you chose one of them, and when you click one of them, the avatars of that subcategory appear