Tree Menu Script Problem

[Brad_Armitage]

Here's my script for opening and closing a folder in a tree menu:

Code: Select all

function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="[img]images/folder.gif[/img]";
   } else {
      obj.style.display="block";
      key.innerHTML="[img]images/textfolder.gif[/img]";
   }
}

Here's what I want it to do, I need my tree menu to only open one level at a time, so for example:
If I have 2 folders, folder a & folder b,

folder a
subfolder a-a
subfolder a-b
folder b
subfolder b-a
subfolder b-b

and I click on folder a, I want to be able to click on folder b and have folder a close. I want it to do the same for all the submenus. Thanks for any help!

[Webforumz Staff]

You need to use a variable to track if a folder is open, and which one it is. Then when you go to open another you'd check that and close it if necessary.

[Brad_Armitage]

Could you give an example maybe?
Here's some sample code of the tree structure if it helps:

Code: Select all

<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/folder.gif[/img]</td><td>Incidents / Accidents by</table>
	<div id="area1" style="display: none; margin-left: 1em;">
		<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/folder.gif[/img]</td><td>Power Production</table>
			<div id="area1.1" style="display: none; margin-left: 1em;">
				<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/folder.gif[/img]</td><td>Hydro</table>
					<div id="area1.1.1" style="display: none; margin-left: 1em;">
						<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/text.gif[/img]</td><td>Matrix Level</td></tr></table>
						<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/text.gif[/img]</td><td>Number</td></tr></table>
						<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/text.gif[/img]</td><td>Type</td></tr></table>
						<table border=0 cellpadding='1' cellspacing=1><tr><td width='16'>[img]images/text.gif[/img]</td><td>Work Area</td></tr></table>
					</div>

This isn't the cleanest because the code section won't scroll lol
Thanks!

[Webforumz Staff]

I didn't test this, but I don't think I made any mistakes:

Code: Select all

// new stuff
iopen = "";

function Toggle(item) { 
	if (iopen!="") doToggle(iopen);
	doToggle(item);
}
// end new stuff

// old stuff with some changes
function doToggle(item) { 	// changed function name
   obj=document.getElementById(item); 
   visible=(obj.style.display!="none") 
   key=document.getElementById("x" + item); 
   if (visible) { 
     obj.style.display="none"; 
     key.innerHTML="[img]images/folder.gif[/img]"; 
	 iopen="";	// new line
   } else { 
      obj.style.display="block"; 
      key.innerHTML="[img]images/textfolder.gif[/img]"; 
	  iopen=item;	// new line
   } 
}

[Brad_Armitage]

Thanks, and that works great for the top level only, but I need all the levels, sublevels included to work in the same way, similar to windows explorer so when you click on a folder on each level every other folder closes!