Expandable List

[housewares]

I have a huge problem and have been looking forever for a solution:

I have an expandable list I got from http://www.widomaker.com/~reboughner/W3C/lists/, example 3 - but the code doesn't work if you add more expandable children. If you expand one set of information, the other disappears. For example:

H1
Sub1
Sub1.1
Sub2
Sub2.1
H2
Sub3
Sub4

If I click on the Sub1, Sub2.1 disappears. If I click Sub2, Sub 1.1 disappears. Why in the world is this going on? I see nothing in the code that closes the other element. My code is slightly modified from theirs to fix the problem of the objects disappearing when moved over, but I can't seem to fix the problem of the disappearing children elements. The whole sub table vanishises (I used borders to see it disappear. Please Help!!! My code:

[FONT=courier new][COLOR=royalblue]var totalItems = 7; /* total number of expandable items */
var menuItems = new Array(totalItems);
var inum = 0

function chngto(evt, toWhat){
var el;

if (document.all)
el = event.srcElement;
else {
el = evt.target;

// if (el.nodeType == 3) el = el.parentNode;
}
// Check for all pertinent tags
// if ("B" == el.tagName || "SPAN" == el.tagName || "IMG" == el.tagName) {
if (toWhat == 0) {
el.style.cursor = (document.all) ? 'hand' : 'pointer';
el.style.color = "#FF0000";
} else {
el.style.cursor = 'default';
el.style.color = "#FFFF99";
}
}


function exposeTable(evt) {
var id = null, el, text;
if (document.all)
el = event.srcElement;
if ("IMG" == el.tagName) {
var p = el.parentNode.parentNode;
el = getChildElement(getChildElement(p,1),0);
}
var text = (document.all) ? el.innerText : el.childNodes[0].nodeValue;
/* The next two lines are mainly to remove the \n, \t, and
* spaces that get caught in the text nodeValue for Gecko */
var regExp = /\n\t*\s*/;
text = text.replace(regExp," ");
for (var i = 0; i<totalItems; i++) {
if (menuItems[i] != text) continue;
id = i+1;
break;
}
if (id == null) return;
var loc = document.images[el.id.toLowerCase()].src.indexOf("close");
var state = (loc != -1 ? 'open' : 'closed');
tableLayer = document.getElementById("tableContainer" + id);

if (state == 'open') {
tableLayer.style.display = 'block';
document.images[el.id.toLowerCase()].src = "open.gif"
} else {
tableLayer.style.display = 'none';
document.images[el.id.toLowerCase()].src = "close.gif"
}

displayText(text)
}



// Function will find Child element, childNum, of the reference node, obj.
// The numbering of childNum starts with 0 for the first child, 1 for second,
// and so on. If no element specifying this is found, the null value is
// returned.

function getChildElement(obj, childNum) {
var child = 0;
if (obj.hasChildNodes()) {
for (var i=0; i < obj.childNodes.length; i++) {
if (obj.childNodes[i].nodeType != 1) continue;
if (child != childNum) {
child++;
continue;
} else
return obj.childNodes[i];
}
}
return null;
}

function createParent(str){
var strLower = str.toLowerCase();
var strsend;
if (inum == 0)
strsend = "<TR>";
else
strsend = "";
strsend = "";
strsend += "<TD WIDTH='15' ALIGN='RIGHT' VALIGN='TOP'><IMG SRC='close.gif' ALT='Closed folder' WIDTH='15' HEIGHT='13' BORDER='0' NAME='" + strLower + "'";
strsend += " ONCLICK='exposeTable(event);' ONMOUSEOVER='chngto(event,0);' ONMOUSEOUT='chngto(event,1);'></TD>";
strsend += " <TD WIDTH='585' ALIGN='LEFT' BORDER = '0'><B ID='" + str + "' ONCLICK='exposeTable(event);' ONMOUSEOVER='chngto(event,0);'";
strsend += " ONMOUSEOUT='chngto(event,1);'>" + str + "</B> <DIV CLASS='tableContainer' ID='tableContainer" + (inum +1)+ "'> <TABLE> ";
menuItems[inum] = str;
inum++;
return strsend;
}


function createChild(str){
var strsend = "<TR> <TD WIDTH='15'>&nbsp;</TD> <TD onClick='displayText(\"" + str + "\");' onMouseOver='chngto(event, 0);'";
strsend += " onMouseOut='chngto(event,1);'>" + str + "</TD> </TR> ";
return strsend;
}

function endParent(){
var strsend= "</TABLE></DIV></TD></TR> ";
return strsend;
}

[davebat]

what if you increase the value of the totalitems variable at the top

var totalItems = 7