The need for a tree-view arose when I was adding a FAQ page to the Pediatric Center website. I didn’t want a long scrolling page, and it appeared to be a tedious affair to create all those internal links and anchors. A treeview structure seemed ideal for a FAQ, but then I couldn’t find anything usable on google (At this point you might say that my google skills could do with some polishing, and come up with a list of wonderful scripts that I completely overlooked…), and besides, good clean dynamic xhtml is still not that easy to come by.
The Definition List xhtml:
The script will operate on any definition list on the page that has the class attribute “tree”, and ignore all others. If you’d rather use a differnt className or operate on all DLs regardless of class, you could change the init() function so it either uses another className, or passes a null – in which case all definition trees on the page will be affected. You can call your tree a “spade” if you like, but I call my tree a “tree”.
Each term/definitions pair should only have one <dt> tag with its text enclosed in a hyperlink, and a single <dd> tag.
The <dd> tag can then include other html structures, such as paragraphs, tables, other lists etc.
The resulting tree structure can be used for multiple purposes, such as FAQs, sitemaps, menus, directories and other listings.
<dl class="tree"> <dt><a href="#">Are you open on the weekends? </a></dt> <dd>The Brooklyn (Brighton) office is open all weekends, all holidays, and in all weather conditions.</dd> <dt><a href="#">Do you accept my insurance?</a></dt> <dd>If we do NOT accept your insurance, it is either (a) because it is very rarely seen in the areas we cover, or (b) because it endangers the health of the patients it covers by making essential services difficult to obtain. <a href="insurances.htm">Click here for a partial listing of insurances we accept</a>.</dd> </dl>
The DLTree script needs to be linked at the head of the html page in the usual manner:
Â …and is executed with the window.onLoad event, using a function that works without conflicting with the window.onload event of any preceding scripts.
At the top of the script, there are a few customisable variables:
//Icon images var plus = "url(images/plus.gif)" var minus = "url(images/minus.gif)" //Padding for the icons var padding = "14px"
padding variable corresponds to the space that the image takes up, including a bit of horizontal padding (for example, padding of 14 for an image of 12 pixels).
Expand All / Collapse All:
To expand & collapse all the nodes in the tree, you can add two links to the top or bottom of your page:
<p><a href="#" onclick="expandDLTree('tree')"> Expand All</a> • <a href="#" onclick="initDLTree('tree')"> Collapse All</a></p>
Examples and Download: