A collapsible heirarchical tree component.

Features

• The tree's nodes can contain arbitrary HTML - and can dynamically resize themselves horizontally and vertically;

• Persistence of the state of the tree when users leave the page and return to it again is handled using hidden form fields - and does not depend on cookies;

• Controls are available to collapse and expand multiple nodes in the tree at once;

• Nodes of the tree are sensitive to the mouse pointer - giving the user immediate feedback about which areas are active.

Demonstrations

Simple tree

			The 1.1 node;
			The 1.2 node; The 1.2 node;
			The 1.1 node;
			The 1.2 node; The 1.2 node;

A more complex tree - with a nested sub-tree

			The 1.1 node;
			The 1.2 node;
			The first directory
			The second directory The 3.1 node; The 3.2 node; The third directory The 3.3 node; The fourth directory The 4.1 node; The 4.2 node; The fifth directory Arbitrary HTML can be placed into each section - including graphics, long lines, tall lines, and text that wraps across multiple lines; Tables can also be used; The 3.4 node; A nested tree: The 1 directory; The 1.1 node; The 1.2 node; The 2 directory; The 2.1 node; The 2.2 node;
			The 2 directory;
			The 2.1 node;

• The front page of this site
• Texture Garden
• Cellular Automata site
• CA FAQ - and subpages
• Origin of Life site - and subpages
• CR disadvantages page
• Durian site

Supported browsers

If there is no browser support for DHTML, JavaScript - or whatever - the usual behaviour will be to show the tree with all the nodes expanded.

This is normally a pretty safe fall-back position - and ensures all the content is still accessible.

Not all browsers support persistence via hidden form fields.

Mozilla/Firefox do not do it yet - for example. If there is no support for persistent form fields, then the tree's state won't persist either.

Rendering trees from a database

Rendering trees from an XML file

Source code

License