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.getEl ementById){ //DynamicDrive.co m change
document.write( '<style type="text/css">\n')
document.write( '.submenu{displ ay: none;}\n')
document.write( '</style>\n')
}

function SwitchMenu(obj) {
if(document.get ElementById){
var el = document.getEle mentById(obj);
var ar = document.getEle mentById("maste rdiv").getEleme ntsByTagName("s pan");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="su bmenu") //DynamicDrive.co m change
ar[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}
}
}

[Richard]

Re: Adding new level to simple &quot;tree&quot ; menu

Richard wrote:
[color=blue]
> http://dynamicdrive.com/dynamicindex1/switchmenu.htm[/color]
[color=blue]
> I want to add a second level menu item to the existing design.
> Currently only one level is possible.[/color]
[color=blue]
> Item 1
> .....link
> .....link
> item 2
> item 3
> item 4[/color]
[color=blue]
> I want to show....[/color]
[color=blue]
> item 1
> ....item 1a
> ....item 1b
> ....item 1c
> ........link
> ........link
> item 2[/color]

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.get ElementById){
var el = document.getEle mentById(obj);
var ar = document.getEle mentById("maste rdiv").getEleme ntsByTagName("s pan");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="su bmenu") //DynamicDrive.co m change
ar[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}

var item1 =
document.getEle mentById("maste r2").getElement sByTagName("spa n");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<item1.length ; i++){
if (item1[i].className=="su bmenu2") //DynamicDrive.co m change
item1[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}
}
} // end of function