LI bullet onclick

Hi

I'm trying to create a simple treeview. The html I'm creating looks
like this:


<ul class="Tree" onclick="TreeOnClick();">
<li class="Open">
<a href="/">Home</a>
<ul>
<li class="NoChildren">Keywords</li>
<li class="Closed">
<a href="/News/">News</a>
<ul>
<li class="NoChildren"><a href="/CompanyNews/">Company
News</a></li>
<li class="NoChildren"><a href="/ExternalNews/">External
News</a></li>
<li class="NoChildren"><a href="/PressAnnouncements/">Press
Announcements</a></li>
</ul>
</li>
<li class="NoChildren">Search</li>
<li class="NoChildren">Sites</li>
<li class="NoChildren">Targeted links on My Site</li>
<li class="Closed">
<a href="/Topics/">Topics</a>
<ul>
<li class="Closed"><a href="/Divisions/">Divisions</a>
<ul>
<li class="NoChildren"><a href="/HumanResources/">Human
Resources</a></li>
<li class="NoChildren"><a href="/Marketing/">Marketing</a></li>
<li class="NoChildren"><a
href="/Operations/">Operations</a></li>
<li class="Closed">
<a href="/Sales/">Sales</a>
<ul>
<li class="NoChildren"><a href="/Test Area/">Test
Area</a></li>
</ul>
</li>
<li class="NoChildren"><a href="/Support/">Support</a></li>
</ul>
</li>
<li class="NoChildren"><a href="/Locations/">Locations</a></li>
<li class="Closed">
<a href="/Paper Making/">Paper Making</a>
<ul>
<li class="NoChildren"><a href="/Test/">Test</a></li>
</ul>
</li>
<li class="NoChildren"><a href="/Projects/">Projects</a></li>
<li class="NoChildren"><a href="/Resources/">Resources</a></li>
<li class="NoChildren"><a href="/Strategy/">Strategy</a></li>
</ul>
</li>
</ul>
</li>
</ul>


with the following style and script:

<script>
<!--
function TreeOnClick()
{
var srcElement = window.event.srcElement;

if (srcElement.tagName!='A')
{
while (srcElement!=null && srcElement.tagName!='LI' &&
srcElement.className.toLowerCase()!='tree')
{
srcElement=srcElement.parentElement;
}
if (srcElement!=null && srcElement.tagName=='LI')
{
switch (srcElement.className.toLowerCase())
{
case 'nochildren':
break;
case 'open':
srcElement.className='Closed';
break;
case 'closed':
default:
srcElement.className='Open';
break;
}
}
}
}
//-->
</script>
<style>
..Tree
{
LIST-STYLE-POSITION: inside;
}
..Tree .Closed
{
list-style-image: url(/_layouts/images/CollapsePlus.gif);
}
..Tree .Closed UL
{
display:none;
}
..Tree .Open
{
list-style-image: url(/_layouts/images/CollapseMinus.gif);
}
..Tree .NoChildren
{
list-style-type: none;
list-style-image: none;
}
</style>



On it's own this works well in IE. You can click on the bullets and it
opens and closes. when I put it in as a webpart in Sharepoint, it's
dosen't work. When I click on the bullet, the only the event for the
parent element fires, and the event.srcElement is the parent element.

Any idead's on how to fix this.
I don't want to have the plus/minus image as a separate element in the
html, but I am open to any other solution.

Thanks

Gary