Tree View Javascript that degrades gracefully for search bots?

[DarkNova]

I'd like to implement a tree view for a section of my website where it might have elements like:

A1
...B1
......C1
......C2
...B2
......C3
A2
...B3
......C4
......C5

I would like little graphics (like a plus sign) next to A1, A2, B1, B2, B3 that expands their respective subitems out when a user clicks them. I've looked at how some libraries do this and see that some of them build the entire tree in javascript, which unfortunately means that if a search bot, like Googlebot, or a user with javascript disabled, comes to the site, they do not see the tree. I need the tree so that if a bot comes the entire tree will just show in the expanded form. Can anyone point me to an example of this or a library that does this? Any help is appreciated! Thanks.

[httpwebwitch]

seems to me that you could acomplish this with nested unordered lists... then hack up some javascript that toggles visibility of <li> child elements and the className (styled to show either a + or -).

[Trace]

This might be the right time to look at the Yahoo! UI Library.
Check out the examples: [developer.yahoo.com...]

[DarkNova]

From what I can tell, the Yahoo UI Library has the same problems as some of the other javascript libraries -- it builds the tree view entirely in javascript. When I view a YUI library example with javascript disabled, the tree isn't even displayed.

[Trace]

Ok, maybe something a little more CSS based would be better suited then?

Try this;
CSS

<style type="text/css">
.TreeView {
font: Verdana;
line-height: 20px;
cursor: pointer;
font-style: normal;
}
.TreeView LI{
/* The padding is for the tree view nodes */
padding: 0 0 0 18px;
float: left;
width: 100%;
list-style: none;
}
.TreeView, .TreeView ul{
margin: 0;
padding: 0;
}
LI.Expanded {background: url(minus.gif) no-repeat left top;}
LI.Expanded ul{display: block;}
LI.Collapsed {background: url(plus.gif) no-repeat left top;}
LI.Collapsed ul{display: none;}
.Highlighted{color: red;}
.AlternateHighlight{color: blue;}
</style>

JavaScript

<script type="text/javascript" language="javascript">
Array.prototype.indexOf = IndexOf;

//Toggles between two classes for an element
function ToggleClass(element, firstClass, secondClass, event){
event.cancelBubble = true;

var classes = element.className.split(" ");
var firstClassIndex = classes.indexOf(firstClass);
var secondClassIndex = classes.indexOf(secondClass);

if (firstClassIndex == -1 && secondClassIndex == -1){
classes[classes.length] = firstClass;}
else if (firstClassIndex!= -1){
classes[firstClassIndex] = secondClass;
}else{
classes[secondClassIndex] = firstClass;}
element.className = classes.join(" ");
}

//Finds the index of an item in an array
function IndexOf(item){
for (var i=0; i < this.length; i++){
if (this[i] == item){
return i;}
}
return -1;
}

//The toggle event handler for each expandable/collapsable node
//- Note that this also exists to prevent any IE memory leaks
//(due to circular references caused by this)
function ToggleNodeStateHandler(event){
ToggleClass(this, "Collapsed", "Expanded", (event == null)? window.event : event);
}

//Prevents the onclick event from bubbling up to parent elements
function PreventBubbleHandler(event){
if (!event) event = window.event;
event.cancelBubble = true;
}

//Adds the relevant onclick handlers for the nodes in the tree view
function SetupTreeView(elementId){
var tree = document.getElementById(elementId);
var treeElements = tree.getElementsByTagName("li");

for (var i=0; i < treeElements.length; i++){
if (treeElements[i].getElementsByTagName("ul").length > 0){
treeElements[i].onclick = ToggleNodeStateHandler;
}else{
treeElements[i].onclick = PreventBubbleHandler;
}
}
}
</script>

HTML

<!-- Level 1 nodes -->
<ul class="TreeView" id="TreeView">
<li class="Collapsed">
First level 1 node
<!-- level 2 nodes -->
<ul>
<li>First level 2 node</li>
<li class="Collapsed Highlighted">
Second level 2 node
<!-- level 3 nodes -->
<ul>
<li class="Collapsed AlternateHighlight">
First level 3 node
<ul>
<li>First level 4 node</li>
<li>Second level 4 node</li>
</ul>
</li>
<li>
Second level 3 node
</li>
</ul>
</li>
<li>Third level 2 node</li>
</ul>
</li>
<li>
Second level 1 node
</li>
</ul>
<script type="text/javascript">SetupTreeView("TreeView");</script>

You still have the problem of the hidden elements - but everything will be there in the source and isn't that what's important?