Jump to content

How to create simple tree like structure


Recommended Posts

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....................

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...