JavaScript: Nested in Tables
How can I get the following code to work when it's nested within a table?
Code:
<html>
<head>
<style>
<!--
#foldheader {
cursor: pointer;
cursor: hand;
list-style-image: url(open.gif);
font-family: verdana;
font-size: 13px;
}
#foldinglist {
list-style-image: none;
font-size: 11px;
}
//-->
</style>
<script language="JavaScript1.2">
<!--
var head="display:''";
img1 = new Image();
img1.src = "open.gif";
img2 = new Image();
img2.src = "open.gif";
var ns6 = document.getElementById&&!document.all;
var ie4 = document.all&&navigator.userAgent.indexOf("Opera") == -1;
function checkcontained(e) {
var iscontained = 0;
cur=ns6? e.target : event.srcElement;
i = 0;
if (cur.id=="foldheader") {
iscontained = 1;
} else {
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)) {
if (cur.id=="foldheader"||cur.id=="foldinglist") {
iscontained=(cur.id=="foldheader")? 1 : 0;
break;
}
cur=ns6? cur.parentNode : cur.parentElement;
}
}
if (iscontained) {
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0];
if (foldercontent.style.display=="none") {
foldercontent.style.display="";
cur.style.listStyleImage="url(close.gif)";
} else {
foldercontent.style.display="none";
cur.style.listStyleImage="url(open.gif)";
}
}
}
if (ie4||ns6) {
document.onclick=checkcontained;
}
//-->
</script>
</head>
<body>
<!-- table would go here -->
<ul>
<li id="foldheader"><b>a</b></li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li style="padding-top: 3px;">b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
