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>