Seeing as the Neo-Archaic logo is a tree, I just couldn’t resist adding a JavaScript tree component to the GrannySmith blog.
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 result is a Definition List Tree component – That is, a bit of JavaScript code that you can add to your page to create a treeview component out of a humble DL.
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.
For example:
<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 JavaScript:
The DLTree script needs to be linked at the head of the html page in the usual manner:
<script language="JavaScript" type="text/javascript" src="scripts/DLTree.js"></script>
 …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"
These variables refer to the plus and minus icons that display the state of each node – plus to expand a collapsed node, and minus to collapse it. You need to create your own graphics here and place them in the images folder. The url for images can be changed here to suit your own folder structure, and is relative to the html document, rather than the javaScript. The images can be safely omitted, or designed to look like anything that indicates tree nodes. The 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:
The downloadable example contains a simplified excerpt from the Belilovsky Pediatric Center FAQ page, and contains all the xhtml and JavaScript mentioned above, including the treeview icons.