SitePoint Sponsor |
|
User Tag List
Results 1 to 1 of 1
Thread: Expanding Tree Nav?
-
Nov 18, 2003, 16:13 #1
- Join Date
- Sep 2003
- Location
- Seattle
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Expanding Tree Nav?
I'm working with a tree style navigation that I found at DynamicDrive and I want to the ability to close an open branch when another is selected. The code is short and sweet, but the syntax is a bit over my head I think. Does anyone know how I would go about it?
Code:<html> <head> <title>Untitled Document</title> <script language="JavaScript1.2"> <!-- //Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02) //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var ns6=document.getElementById&&!document.all var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 function checkcontained(e){ var iscontained=0 cur=ns6? e.target : event.srcElement i=0 if (cur.id=="foldheader") iscontained=1 else while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){ if (cur.id=="foldheader"||cur.id=="foldinglist"){ iscontained=(cur.id=="foldheader")? 1 : 0 break } cur=ns6? cur.parentNode : cur.parentElement } if (iscontained){ var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0] if (foldercontent.style.display=="none"){ foldercontent.style.display="" } else{ foldercontent.style.display="none" } } } if (ie4||ns6) document.onclick=checkcontained //--> </script> </head> <body> <font face="Verdana"> <ul> <li id="foldheader">News</li> <ul id="foldinglist" style="display:none"> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://www.abcnews.com">ABC News</a></li> <li><a href="http://www.news.bbc.co.uk">BBC News</a></li> </ul> <li id="foldheader">Webmaster</li> <ul id="foldinglist" style="display:none"> <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li> <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li> <li><a href="http://www.freewarejava.com">Freewarejava.com</a></li> </ul> <li id="foldheader">Nested Example</li> <ul id="foldinglist" style="display:none"> <li><a href="http://www.dynamicdrive.com">outer 1</a></li> <li><a href="http://www.dynamicdrive.com">outer 2</a></li> <li id="foldheader">Nested</li> <ul id="foldinglist" style="display:none"> <li><a href="http://www.dynamicdrive.com">nested 1</a></li> <li><a href="http://www.dynamicdrive.com">nested 2</a></li> </ul> <li><a href="http://www.dynamicdrive.com">outer 3</a></li> <li><a href="http://www.dynamicdrive.com">outer 4</a></li> </ul> </ul> </font> <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br> <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p> </body> </html>
Bookmarks