There are hundreds of DHTML trees available online, most of them and written from scratch, some easy to understand and implement, while others are real pain to customize. Some of them need a JavaScript array to be populated or read an XML file to generate the tree. I've tried to develop one using the Prototype.js library for the interactivity and HTML for the tree structure. This one is with checkboxes, so when you select or deselect a checkbox all it's child checkboxes are automatically selected/deselected. You can make a little modification to have one without checkboxes. You can get prototype.js from http://prototypejs.org The JavaScript We'll be using some very handy library functions from the Prototype.js, which are: Element.immediateDescendants() http://www.prototypejs.org/api/element We use this method to toggle any clicked nodes' immediate branches. Element.toggle() http://www.prototypejs.org/api/element/toggle Hides or shows and element depending on it's current state. $() http://www.prototypejs.org/api/utility/dollar This is an utility function which is similar to the DOM functionality of document.getElementById(..) Here's the JavaScript to toggle the tree and to toggle the checkboxes: Code: // Called when a node-text is clicked, toggles the branches // @param: the reference of the clicked node, i.e. the <li> function showChildren(obj) { var children = obj.immediateDescendants(); for(var i=0;i<children.length;i++) { if(children[i].tagName.toLowerCase()=='ul') children[i].toggle(); } } // Called when a node's checkbox changes, toggles the child checkboxes recursively // @param: the reference of the clicked node, i.e. the <li> // @param: reference to self function checkChildren(obj,srcObj) { var children = obj.immediateDescendants(); for(var i=0;i<children.length;i++) { if(children[i].tagName.toLowerCase()=='input' && children[i].type=='checkbox' && children[i]!=srcObj) children[i].checked = srcObj.checked; // recursive call checkChildren(children[i],srcObj); } } The HTML The HTML below is a sample HTML, you may generate the from a server side script dynamically. HTML: <style type='text/css' media='all'> body { font: normal 11px verdana; } ul li{ list-style-type:none; margin:0; padding:0; margin-left:8px; } ul li a{ text-decoration:none; color:#000; } </style> <ul style="display:block"> <li id="1"><input type='checkbox' name='f_1' onclick='checkChildren($("1"),this);'><a href='javascript:void(0);' onclick='showChildren($("1"));'>Web Development</a> <ul style="display:none"> <li id="2"><input type='checkbox' name='f_2' onclick='checkChildren($("2"),this);'><a href='javascript:void(0);' onclick='showChildren($("2"));'>PHP</a></li> <li id="3"><input type='checkbox' name='f_3' onclick='checkChildren($("3"),this);'><a href='javascript:void(0);' onclick='showChildren($("3"));'>ASP</a></li> </ul> </li> <li id="4"><input type='checkbox' name='f_4' onclick='checkChildren($("4"),this);'><a href='javascript:void(0);' onclick='showChildren($("4"));'>VBScript/JScript/DHTML</a> <ul style="display:none"> <li id="5"><input type='checkbox' name='f_5' onclick='checkChildren($("5"),this);'><a href='javascript:void(0);' onclick='showChildren($("5"));'>JScript/JavaScript</a> <ul style="display:none"> <li id="8"><input type='checkbox' name='f_8' onclick='checkChildren($("8"),this);'><a href='javascript:void(0);' onclick='showChildren($("8"));'>JScript</a></li> <li id="9"><input type='checkbox' name='f_9' onclick='checkChildren($("9"),this);'><a href='javascript:void(0);' onclick='showChildren($("9"));'>JavaScript</a></li> </ul> </li> <li id="6"><input type='checkbox' name='f_6' onclick='checkChildren($("6"),this);'><a href='javascript:void(0);' onclick='showChildren($("6"));'>VBScript</a></li> <li id="7"><input type='checkbox' name='f_7' onclick='checkChildren($("7"),this);'><a href='javascript:void(0);' onclick='showChildren($("7"));'>CSS</a></li> </ul> </li> </ul> Final Words This was really helpful for me, a simple DHTML tree implementation for quick deployment. Next time we'll look at dynamic server-side script to generate the HTML, and also process the submitted information. The full sample is below for you to try out, do not forget to download prototype.js HTML: <script language="JavaScript" src="prototype.js"></script> <script language="JavaScript"> function showChildren(obj) { var children = obj.immediateDescendants(); for(var i=0;i<children.length;i++) { if(children[i].tagName.toLowerCase()=='ul') children[i].toggle(); } } function checkChildren(obj,srcObj) { var children = obj.immediateDescendants(); for(var i=0;i<children.length;i++) { if(children[i].tagName.toLowerCase()=='input' && children[i].type=='checkbox' && children[i]!=srcObj) children[i].checked = srcObj.checked; // recursive call checkChildren(children[i],srcObj); } } </script> <style type='text/css' media='all'> body { font: normal 11px verdana; } ul li{ list-style-type:none; margin:0; padding:0; margin-left:8px; } ul li a{ text-decoration:none; color:#000; } </style> <ul style="display:block"> <li id="1"><input type='checkbox' name='f_1' onclick='checkChildren($("1"),this);'><a href='javascript:void(0);' onclick='showChildren($("1"));'>Web Development</a> <ul style="display:none"> <li id="2"><input type='checkbox' name='f_2' onclick='checkChildren($("2"),this);'><a href='javascript:void(0);' onclick='showChildren($("2"));'>PHP</a></li> <li id="3"><input type='checkbox' name='f_3' onclick='checkChildren($("3"),this);'><a href='javascript:void(0);' onclick='showChildren($("3"));'>ASP</a></li> </ul> </li> <li id="4"><input type='checkbox' name='f_4' onclick='checkChildren($("4"),this);'><a href='javascript:void(0);' onclick='showChildren($("4"));'>VBScript/JScript/DHTML</a> <ul style="display:none"> <li id="5"><input type='checkbox' name='f_5' onclick='checkChildren($("5"),this);'><a href='javascript:void(0);' onclick='showChildren($("5"));'>JScript/JavaScript</a> <ul style="display:none"> <li id="8"><input type='checkbox' name='f_8' onclick='checkChildren($("8"),this);'><a href='javascript:void(0);' onclick='showChildren($("8"));'>JScript</a></li> <li id="9"><input type='checkbox' name='f_9' onclick='checkChildren($("9"),this);'><a href='javascript:void(0);' onclick='showChildren($("9"));'>JavaScript</a></li> </ul> </li> <li id="6"><input type='checkbox' name='f_6' onclick='checkChildren($("6"),this);'><a href='javascript:void(0);' onclick='showChildren($("6"));'>VBScript</a></li> <li id="7"><input type='checkbox' name='f_7' onclick='checkChildren($("7"),this);'><a href='javascript:void(0);' onclick='showChildren($("7"));'>CSS</a></li> </ul> </li> </ul>
Well, in that case you'll need to go through JavaScript basics first and then you'll get this code easily.
Note: If you are planning to implement this in your dynamic cgi-perl script, do remember to escape the javascript $() function \$(). Few of my friends faced a problem when not escaping $
To generate tree dynamically we can make use of "assembler design pattern". For that we have to create javascript which generates tree dynamically in a "java" file. the whole java script should be passed to web page as a single string. java file: String treeStr; createTree(){ treeStr+=treeStr+DynamicItems from DB or Any+"Script related to active widgets"; } at last "treeStr" will be passed to target page where it requires dynamic tree.