html, css and pure js for tree view - html

Question

This is quite simple but I'm quite new with JavaScript. Here is the problem I'm facing.
I would like to have this tree view:
Route (index.html)
|--Tree 1 (tree1.html)
|--Child 1 (tree1child1.html)
|--Tree 2 (tree2.html)
|--Child 1 (tree2child1.html)
Each html will point to toggle.js to generate the tree view. My problem with the .js is: if I click on the Tree 2, Child 1 - it will show the correct page but pointing to the Tree 1, Child 1 selections as the child has same name. This is the script that I use.
function toggle(id) {
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
imgElement = document.getElementById(img);
if (ulElement) {
if (ulElement.className == 'closed') {
ulElement.className = "open";
imgElement.src = "./menu/opened.gif";
} else {
ulElement.className = "closed";
imgElement.src = "./menu/closed.gif";
}
}
} // toggle()
function searchUp(element, tagName) {
// look through the passed elements
var current = element;
do {
current = current.parentNode;
} while (current.nodeName != tagName.toUpperCase() && current.nodeName != "BODY");
return current.nodeName != tagName.toUpperCase() ? null : current;
}
function getAnchor(elements, searchText, exclude) {
// look through the passed elements
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML == searchText) {
if (exclude == null || exclude.innerHTML != elements[i].parentElement.innerHTML) {
// return the anchor tag
return elements[i];
}
}
if (elements[i].children != null) {
var a = getAnchor(elements[i].children, searchText, exclude);
if (a != null) {
return a;
}
}
}
return null;
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function select(tree) {
// NOTE: we need to escape the tree string to replace chevrons with their html equivalent in order to match generic strings correctly
var items = document.getElementById('menu').children; // .getElementsByTagName("a");
var anchor = getAnchor(items, htmlEntities(tree[0]), null);
var ul = searchUp(anchor, "ul");
for (var i = 1; i < tree.length; i++) {
anchor = getAnchor(ul.children, htmlEntities(tree[i]), anchor.parentElement);
ul = searchUp(anchor, "ul");
}
if (anchor != null) {
anchor.className = 'selected';
if (ul.className != 'open') {
toggle(ul.id.substr(3));
}
}
} // select()