My leftside Nav is working almost perfectly. The main remaing problem is that when you click on a top level a category (the actual category name, not the triangle) you are taken that category and that category opens up on the leftside nav. I have a sample page setup where pom poms have been selected (li contains class=selected), but it's cheerleading uniforms thats opened up.
http://www.omnicheer\test\index.html

For the life of me I can't figure out why this is happening. The bahavior works perfectly on the sub categories and sub-sub categories. Please help. Thanks.

Here's the HTML/CSS:
Code:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Pom Poms</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <META NAME='keywords' CONTENT=''>
        <META NAME='description' CONTENT=''>
        <script type="text/javascript" src="accordion4/jquery.pack.js"></script>
        <script type="text/javascript" src="accordion4/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="accordion4/leftNavMenu.js"></script>
    <style type="text/css">
<!--
* {
    margin:0; 
    padding:0;  
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#666;
    }
#leftnav {
width:160px;
margin:0 5px 25px 0;
float:left;
text-align: left;
}
/* Category tree */
ul.tree, ul.tree ul{ list-style-type:none; }
ul.tree li{
        padding-left:7px;
        margin-left:5px;
}
ul.tree a{ padding-left:2px; text-decoration:none; border:none; }
ul.tree a.selected{ font-weight:bold; }
#leftNavMenu {
        padding:0.5em 0.7em 0pt;
        background-color: #fff;
        min-height:20px;
}
#leftNavMenu ul.tree { padding-left:0.5em; }
#leftNavMenu ul.dhtml{ display:none; }
#leftNavMenu ul.tree li {
        border: none;
        padding-left:15px;
        margin-left:0;
        font-weight:bold;
        font-size:13px;
        line-height:13px;
        margin-top:2px;
}
#leftNavMenu ul.tree li ul li{
        padding-left:15px;
        background:none;
        font-size:11px;
        font-weight:normal;
}
#leftNavMenu ul.tree li ul li ul li{
        padding-left:15px;
        font-size:9px;
}
#leftNavMenu ul.tree a{
        padding-left:0;
        color:#888;
}
div#leftNavMenu ul.tree a:hover{
        text-decoration:none;
        color:#cc3399;
}
div#leftNavMenu ul.tree a.selected{
        color: #888;
        font-weight: bold;
}
div#leftNavMenu span.grower{
        display:block;
        float:left;
        background-position: 0px 3px;
        background-repeat: no-repeat;
        width:14px;
        height:15px;
        margin: 0 0 0 -15px!important;
        margin: 0 0 0 -6px;
        padding: 0;
}
div#leftNavMenu span.OPEN { 
background-image: url(contract.gif);
cursor:pointer;
}
div#leftNavMenu span.CLOSE{ 
background-image: url(expand.gif);
cursor:pointer;
}
-->
    </style>
</head>
<body>
<div id="leftnav">            
    <div id="leftNavMenu">
        <ul class="tree dhtml">
            <li><a href="#" >Cheerleading Uniforms</a>
            <ul>
                <li><a href="#" >Double-Knit Cheer Uniforms</a></li>
                <li><a href="#" >Nylon Strech Cheerleader Uniforms</a></li>
                <li><a href="#" >Uniform Packages</a></li>
             </ul></li>
            <li class="selected"><a href="#" >Pom Poms</a>
            <ul>
                <li><a href="#" >In-Stock Cheer Poms</a>
                <ul>
                    <li><a href="#" >Holographic Poms</a></li>
                    <li><a href="#" >Metallic Poms</a></li>
                    <li><a href="#" >Plastic Poms</a></li>
                    <li><a href="#" >Youth Poms</a></li>  
                   </ul></li>
                <li><a href="#" >Custom Cheerleading Poms</a>
                <ul>
                    <li><a href="#" >Youth Poms</a></li>
                    <li><a href="#" >Flash Poms</a></li>
                    <li><a href="#" >Holographic Poms</a></li>
                    <li><a href="#" >Metallic Poms</a></li>
                    <li><a href="#" >Plastic Poms</a></li>
                    <li><a href="#" >Wetlook Poms</a></li>  
                </ul></li>
             </ul></li>
            <li><a href="#" >Cheerleading Shoes</a>
            <ul>
                <li><a href="#" >Asics Shoes</a></li>
                <li><a href="#" >Adidas Shoes</a></li>
                <li><a href="#" >Chasse Shoes</a></li>
                <li><a href="#" >Converse Shoes</a></li>
                <li><a href="#" >Kaepa Shoes</a></li>
                <li><a href="#" >Nike shoes</a></li>
                <li><a href="#" >Power Shoes</a></li>
                <li><a href="#" >Reebok Shoes</a></li>
             </ul></li>
            <li><a href="#" >Cheer Skirts</a></li>
        </ul>    
    </div>            
</div>
</body>
</html>
Here's the Javascript for leftNavMenu.js:
Code JavaScript:
function autoUrl(name, dest) {
 
var loc;
var id_list;
 
id_list = document.getElementById(name);
loc = id_list.options[id_list.selectedIndex].value;
if (loc != 0)
location.href = dest+loc;
return ;
}
 
/*
** show or hide element e depending on condition show
*/
function toggle(e, show)
{
e.style.display = show ? '' : 'none';
}
 
function toggleMultiple(tab)
{
var len = tab.length;
 
for (var i = 0; i < len; i++)
if (tab[i].style)
toggle(tab[i], tab[i].style.display == 'none');
}
 
/**
* Show dynamicaly an element by changing the sytle "display" property
* depending on the option selected in a select.
*
* @param string $select_id id of the select who controls the display
* @param string $elem_id prefix id of the elements controlled by the select
* the real id must be : 'elem_id'+nb with nb the corresponding number in the
* select (starting with 0).
*/
function showElemFromSelect(select_id, elem_id)
{
var select = document.getElementById(select_id);
for (var i = 0; i < select.length; ++i)
{
var elem = document.getElementById(elem_id + select.options[i].value);
if (elem != null)
toggle(elem, i == select.selectedIndex);
}
}
 
/**
* Get all div with specified name and for each one (by id), toggle their visibility
*/
function openCloseAllDiv(name, option)
{
var tab = $('*[name='+name+']');
for (var i = 0; i < tab.length; ++i)
toggle(tab[i], option);
}
 
/**
* Toggle the value of the element id_button between text1 and text2
*/
function toggleElemValue(id_button, text1, text2)
{
var obj = document.getElementById(id_button);
if (obj)
obj.value = ((!obj.value || obj.value == text2) ? text1 : text2);
}
 
function addBookmark(url, title)
{
if (window.sidebar)
return window.sidebar.addPanel(title, url, "");
else if ( window.external )
return window.external.AddFavorite( url, title);
else if (window.opera && window.print)
return true;
return true;
}
 
function writeBookmarkLink(url, title, text, img)
{
var insert = '';
if (img)
insert = writeBookmarkLinkObject(url, title, '<img src="' + img + '" alt="' + escape(text) + '" title="' + escape(text) + '" />') + '&nbsp';
insert += writeBookmarkLinkObject(url, title, text);
document.write(insert);
}
 
function writeBookmarkLinkObject(url, title, insert)
{
if (window.sidebar || window.external)
return ('<a href="javascript:addBookmark(\'' + escape(url) + '\', \'' + escape(title) + '\')">' + insert + '</a>');
else if (window.opera && window.print)
return ('<a rel="sidebar" href="' + escape(url) + '" title="' + escape(title) + '">' + insert + '</a>');
return ('');
}
//animate the opening of the branch (span.grower jQueryElement)
function openBranch(jQueryElement, noAnimation) {
jQueryElement.addClass('OPEN').removeClass('CLOSE');
if(noAnimation)
jQueryElement.parent().find('ul:first').show();
else
jQueryElement.parent().find('ul:first').slideDown();
}
//animate the closing of the branch (span.grower jQueryElement)
function closeBranch(jQueryElement, noAnimation) {
jQueryElement.addClass('CLOSE').removeClass('OPEN');
if(noAnimation)
jQueryElement.parent().find('ul:first').hide();
else
jQueryElement.parent().find('ul:first').slideUp();
}
//animate the closing or opening of the branch (ul jQueryElement)
function toggleBranch(jQueryElement, noAnimation) {
if(jQueryElement.hasClass('OPEN'))
closeBranch(jQueryElement, noAnimation);
else
openBranch(jQueryElement, noAnimation);
}
//when the page is loaded...
$(document).ready(function () {
//to do not execute this script as much as it's called...
if(!$('ul.tree.dhtml').hasClass('dynamized'))
{
//add growers to each ul.tree elements
$('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");
 
//dynamically add the '.last' class on each last item of a branch
$('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');
 
//collapse every expanded branch
$('ul.tree.dhtml span.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
$('ul.tree.dhtml').show();
 
//open the tree for the selected branch
$('ul.tree.dhtml .selected').parents().each( function() {
if ($(this).is('ul'))
toggleBranch($(this).prev().prev(), true);
});
toggleBranch( $('ul.tree.dhtml .selected').prev(), true);
 
//add a fonction on clicks on growers
$('ul.tree.dhtml span.grower').click(function(){
toggleBranch($(this));
});
//mark this 'ul.tree' elements as already 'dynamized'
$('ul.tree.dhtml').addClass('dynamized');
}
});

Again thanks for your time any help you can give.

-- Sandra