JavaScript Folding Menu Tree

Question

This is a JavaScript function for menu tree. I would like to add more sub-menu in it, not only one sub-menu. What's x.all[0] and x.all[2]?

var head="display:''"  
img1=new Image()  
img1.src="fold.gif"  
img2=new Image()  
img2.src="open.gif"  

function change(){  
if(!document.all)  
return  
if (event.srcElement.id=="folding"){  
var x=event.srcElement.parentElement  
if (x.all[2].style.display=="none"){  
x.all[0].src="open.gif"  
x.all[2].style.display=''  
alert(x.all[2].name )  
}  
else{  
x.all[0].src="fold.gif"  
x.all[2].style.display="none"  
}  

}  
document.onclick=change  

Answer 1

all is a collection of child elements belonging to a particular element. document.all returns all elements for a document. It is an IE only feature and will not work in other browsers.

In your code, x is event.srcElement.parentElement, so it's all property would be all the child elements belonging to that parent element. The [0] will return the first element in the collection and [2] will return the third element in the collection.

As mentioned before, this code will only work in Internet Explorer, so you should explore other cross browser methods to achieve what you're trying to do if you want better browser compatibility.