Hi Dhtml

You can get that effect to work using javascript/CSS & list items. This way it degrades gracefully for users without JS enabled.

A similar one I used a while back (cannot remember the source for this - I don't take the credit)- snippet :

javascript

function initMenus() {
if (!document.getElementsByTagName) return;

var aMenus = document.getElementsByTagName("LI");
for (var i = 0; i < aMenus.length; i++) {
var mclass = aMenus[i].className;
if (mclass.indexOf("treenode") > -1) {
var submenu = aMenus[i].childNodes;
for (var j = 0; j < submenu.length; j++) {
if (submenu[j].tagName == "A") {

submenu[j].onclick = function() {
var node = this.nextSibling;

while (1) {
if (node!= null) {
if (node.tagName == "UL") {
var d = (node.style.display == "none")
node.style.display = (d)? "block" : "none";
this.className = (d)? "treeopen" : "treeclosed";
return false;
}
node = node.nextSibling;
} else {
return false;
}
}
return false;
}

submenu[j].className = (mclass.indexOf("open") > -1)? "treeopen" : "treeclosed";
}

if (submenu[j].tagName == "UL")
submenu[j].style.display = (mclass.indexOf("open") > -1)? "block" : "none";
}
}
}
}

window.onload = initMenus;

CSS

.treemenu {margin:0;padding:0;list-style:none;border:0;}
.treemenu ul {list-style:none;margin:10px 0 0 0;padding:10px;}
.treemenu li {display:block;background:none;margin:0;padding:0;background:#fff;}
.treemenu a {display:block;text-decoration:none;margin:0;padding:0 0 0 19px;}
.treemenu .treeopen {background:url(icon-minus.gif) no-repeat left;}
.treemenu .treeclosed {background:url(icon-plus.gif) no-repeat left;}
.treenode {margin:0;padding:0;}

html

<ul class="treemenu">
<li class="treenode"><a class="treeopen" href="#">Main link</a>
<ul style="display:block;">
<li class="treenode">sublink</li>
</ul>
</li>
</ul>

Cheers, Limbo

Thank you! I will give it a try.