Adding new level to simple "tree" menu

[Richard]

http://dynamicdrive.com/dynamicindex1/switchmenu.htm

I want to add a second level menu item to the existing design.
Currently only one level is possible.

Item 1
......link
......link
item 2
item 3
item 4

I want to show....

item 1
.....item 1a
.....item 1b
.....item 1c
.........link
.........link
item 2

So that when item 1a is clicked, only those items in that division are
collapsed.

I am assuming I can simply add a new variable, say "var item1" then copy the
script for the changes, and change "masterdiv" to "item1".

Or if anyone has a link to a similar layout with multiple layers I'll take a
look at it.



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.className=="submenu") //DynamicDrive.com change
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

 

[Richard]

http://dynamicdrive.com/dynamicindex1/switchmenu.htm

I want to add a second level menu item to the existing design.
Currently only one level is possible.

Item 1
.....link
.....link
item 2
item 3
item 4

I want to show....

item 1
....item 1a
....item 1b
....item 1c
........link
........link
item 2

Ok so my first attempt went so so.
When page is first opened it shows.....

item 1
.....item 1a
.........link
item 2
item 3

When link is clicked on I get...

item 1
......item 1 a
item 2
item 3

When item 1a is clicked, the original tree shows and nothing else happens
anywhere.
So what do I need to do to correct so I get what I want?

My changes are below.


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.className=="submenu") //DynamicDrive.com change
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}

var item1 =
document.getElementById("master2").getElementsByTagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<item1.length; i++){
if (item1.className=="submenu2") //DynamicDrive.com change
item1.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
} // end of function