How to create simple tree like structure

[pankaj.ghadge]

I want create structure like this......... ▼Online User -User1 -User2 -User3 -User4 ▼Off-line User -User6 -User7 -User8 -User9Suppose he/she has clicked on ▼Off-line User the view should be like this ▼Online User -User1 -User2 -User3 -User4 »Off-line UserI want to create User Interface like this so please tell how do this....................

[jhecht]

by adding an onclick event to the arrow's parent element (prefferably having it wrapped in a span tag), then setting a variable in that element to true/false for whether or not it should be clicked. Something along these lines:

 function toggle(el,toggle){	el = document.getElementById(el||el.id);	toggle = document.getElementById(toggle||toggle.id);	if(toggle.state==null || toggle.state==undefined) toggle.state='down';	if(toggle.state=='down'){	   toggle.style.display='none';	  toggle.state='up';		   toggle.innerHTML="uparrow";	}else{	  toggle.state='down';	  toggle.style.display='';		  toggle.innerHTML='downarrow';	} }

It would be used like so:

 <span id="element" onclick="toggle(this.id,'toggle')">Down Arrow</span> Offline   <div id="toggle">	 billy	 bobby	 that one guy  </div>

Notice that the id 'toggle' is in quotes, and matches the ID of the div where the users are stored

[pankaj.ghadge]

Thanks Buddy ..........................

[Jesdisciple]

See http://www.dynamicdrive.com/dynamicindex1/navigate1.htm for a more robust and degradable solution.