None close all the UL

Dear All,
I have a javascript as below. My problem is that span.onclick I have tried to run a for loop and set all the ul.style.display to none but it all disappear. What I want to achieve is that if one of the tree plus button is click I want all the rest to be closed?

this.sitemapstyler = function(){
	var sitemap = document.getElementById("sitemap")
	if(sitemap){
		
		this.listItem = function(li){
			if(li.getElementsByTagName("ul").length > 0){
				var ul = li.getElementsByTagName("ul")[0];
				//alert("NAme is :"+ul);
				ul.style.display = "none";
				var span = document.createElement("span");
				span.className = "collapsed";
				span.onclick = function(){
					
					
					
					//alert("ul.style.display :"+ul.style.display );
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
				};
				li.appendChild(span);
			};
		};
		
		var items = sitemap.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){
			//alert("I :"+i+"LEngth :"+items.length);
			listItem(items[i]);
		};
		
	};	
};

window.onload = sitemapstyler;

The standard technique to achieve this is to first hide all of them, and to then show only the one that is applicable.

Dear Paul,
Here is what I have added further on the codes and the link is here http://183.78.169.54/tree/2.html.

span.onclick = function(){

				var form1= document.getElementById('form1');
      var uls = form1.getElementsByTagName("ul");
				uls.style.display = "none";
				uls.className = "collapsed";
				//alert("ul.style.display :"+ul.style.display );
				ul.style.display = (ul.style.display == "none") ? "block" : "none";
				this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
			};

Here’s where the problem is currently occurring:


var uls = form1.getElementsByTagName("ul");
uls.style.display = "none";

What’s happening is that uls is an array-like list of elements, but the next line is treating it as if it were a single element instead.

Dear Paul,
I have added this and whole thing get hidden when I press any of the plus sign at this link http://183.78.169.54/tree/2.html.

var uls = form1.getElementsByTagName(“ul”);
for (var i = 0; i < uls.length; i++)
{
uls[i].style.display = “none”;
uls[i].className = “collapsed”;
}

Does that indicate that you need to better understand what is going on, or to start over from scratch?

Dear Paul,
Can your hint where is my mistake? Then that will be helpful.

Dear Paul,
Can you give me a better understand of where I am making the mistake? Is guess is a slight mistake some where right?

It looks like you have it working now, well done.

Dear Paul,
Yes I have done maybe you comment if something is not right.
I don’t quite understand why we need the span n how it control the opening n closing of the tree.

I would think that it’s because your activation is the plus/minus symbol that’s contained within the span.