The markup for the tree is:
<ul class="tree"> <li><span>One</span> <ul> <li><span>One.one</span> <ul> <li><span>One.one.one</span></li> <li><span>One.one.two</span></li> <li><span>One.one.three</span></li> </ul> </li> <li><span>One.two</span> <ul> <li><span>One.two.one</span></li> <li><span>One.two.two</span></li> <li><span>One.two.three</span></li> </ul> </li> </ul> </li> <li class="expanded"><span>Two</span> <ul> <li><span>Two.one</span> <ul> <li><span>Two.one.one</span></li> <li><span>Two.one.two</span></li> <li><span>Two.one.three</span></li> </ul> </li> </ul> </li> <li><span>Three</span> <ul> <li><span>Three.one</span> <span class="supplemental">supplemental info</span> <ul> <li><span>Three.one.one</span></li> <li><span>Three.one.two</span></li> <li><span>Three.one.three</span></li> </ul> </li> </ul> </li> </ul>
If the browser has disabled scripting, users sees all items.
You also need to include the following in the head:
<link href="tree.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="tree.js"></script>
The node labels (span elements) could be combined with icons to indicate resource types. Supplemental information could be placed in a second span element before the UL element for nested nodes.