Simple Tree Menu

[straf12]

1) Script Title:
Simple Tree Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem:
I'm trying to open (if not already open) a subtree by clicking on a link in the same page with onClick (something like <a href="http://try.com/example.asp" onClick="ddtreemenu.expandSubTree('treemenu1',0)" >expanding sub 1</a>). However I try calling that function, it does not work. I'm new at Javascript but I can't believe there is no way doing that.

Another question is, how do I make it possible that when I click on Folder1 it expands but it closes Folder2 (which was open). So is it possible that there is maximum one expanded Folder at the same time?

If you can help me that would be grate! Specially cause I think it's a very usefull en fast script. Thx

[ddadmin]

For #1, try the attached modified .js file. Then, within your HTML, give the subtree (the LI element) an ID, and call ddtreemenu.manualexpand() to expand it:

<ul id="treemenu1" class="treeview">
<li>Item 1</li>
<li>Item 2</li>

<li>Folder 1
	<ul>
	<li>Sub Item 1.1</li>
	<li>Sub Item 1.2</li>
	</ul>
</li>
<li>Item 3</li>

<li>Folder 2
	<ul>
	<li>Sub Item 2.1</li>
	<li id="mysubtree">Folder 2.1
		<ul>
		<li>Sub Item 2.1.1</li>
		<li>Sub Item 2.1.2</li>
		</ul>
	</li>
</ul>
</li>

<li>Item 4</li>
</ul>

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)

</script>

	
	
<a href="#" onClick="ddtreemenu.manualexpand('mysubtree'); return false">Expand sub tree</a>

For #2, there's unfortunately no easy way to have one subtree collapse when the current one is open, unlike for example Switch Content script. I'll most likely add in such a feature the next time the script is updated.

[straf12]

#1 It's perfect, just great! Even works within the asp-code!
#2 I'm looking forward to the update
Lots of appreciations
Many thanks for the quick answer!

[seloh77]

I myself was looking for the solution for your second problem and after reading this post decided too give it a try myself since it didn't exist yet.

I don't know if it is "correctly" programmed for I am not a javascript programmer but it is working as I want it too.

I've created the function contractRest by taking a good look at the flatten function.

ddtreemenu.contractRest = function(treeid, ulelement)
{
	var ultags = document.getElementById(treeid).getElementsByTagName("ul")

	for (var i=0; i<ultags.length; i++)
	{
		ultags[i].style.display=(ulelement==ultags[i])? "block" : "none"

		var relvalue = (ulelement==ultags[i])? "open" : "closed"

		if (relvalue=="open")
		{
			ddtreemenu.expandSubTree(treeid, ultags[i])
		}
		else
		{
			ultags[i].setAttribute("rel", "closed")
			ultags[i].parentNode.style.backgroundImage = "url("+ddtreemenu.closefolder+")"
		}
	}
}

I call this on the onclick open event:

		ulelement.parentNode.onclick = function(e)
		{
			var submenu=this.getElementsByTagName("ul")[0]
			if (submenu.getAttribute("rel")=="closed")
			{
				ddtreemenu.contractRest(treeid, ulelement)
				submenu.style.display="block"
				submenu.setAttribute("rel", "open")
				ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
			}
		...

I've only tested this for the particular site I'm using it on, haven't tested on a "standard" tree menu.
Hope it helps.

Attachment 2027