Trädmeny

Skulle behöva lite hjälp med min trädmeny. Har snurrat in mig i Loopar så nu vet jag varken ut eller in.
Har två tabeller
Grupp
id
gruppnamn

Medlem
id
gruppid
namn
tel
epost

Trädmenyn ska i första läget rada upp alla gruppnamn. Ett plustecken framför varje. Trycker man på plustecknet så ska alla medlemmar visa sig i en undermeny. Trycker man på en medlem så ska tel, epost visa sig.
Använder mig av följande javascriptkod:

function getId(id) {
if (typeof(document.getElementById) != "undefined") {
return document.getElementById(id);
} else {
return document.all[id];
}
}

function thread(node,id) {
var divid = getId(id);
if (divid.style.display == 'none') {
if (node.childNodes && node.childNodes.length > 0)
if (node.childNodes.item(0).nodeName == "IMG") {
node.childNodes.item(0).src = "images/minus.gif";
node.childNodes.item(0).alt = "Close thread";
node.title = "Close thread";
}
divid.style.display = 'block';
} else {
if (node.childNodes && node.childNodes.length > 0)
if (node.childNodes.item(0).nodeName == "IMG") {
node.childNodes.item(0).src = "images/plus.gif";
node.childNodes.item(0).alt = "Open thread";
node.title = "Open thread";
}
divid.style.display = 'none';
}
}

i aspfilen är det följande kod som är grunden:

<a onclick="thread(this, id01);" class="plain"><img src="images/plus.gif" alt="-" width="10" height="10"/></a>&nbsp;&nbsp;Meny>
<div id="id01" style="display:none">

<img src="images/stopp.gif" alt="item" width="10" height="10" />Undermeny1<br/>
<img src="images/stopp.gif" alt="item" width="10" height="10" />Undermeny2<br/>
</div>

Hur ska jag göra för att få till så att det skrivs ut rätt?

Tacksam för hjälp