jQuery Accordian Menu behavior problem

JavaScript
1

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\ est\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:


[COLOR=#0000ff]<![/COLOR][COLOR=#800000]DOCTYPE [/COLOR][COLOR=#ff0000]HTML[/COLOR][COLOR=#ff0000]PUBLIC[/COLOR][COLOR=#0000ff] "-//W3C//DTD HTML 4.0 Transitional//EN">[/COLOR]
[COLOR=#0000ff]<[/COLOR][COLOR=#800000]html[/COLOR][COLOR=#0000ff]>[/COLOR]
    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]head[/COLOR][COLOR=#0000ff]>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]title[/COLOR][COLOR=#0000ff]>[/COLOR]Pom Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]title[/COLOR][COLOR=#0000ff]>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]meta [/COLOR][COLOR=#ff0000]http-equiv[/COLOR][COLOR=#0000ff]="Content-Type" [/COLOR][COLOR=#ff0000]content[/COLOR][COLOR=#0000ff]="text/html; charset=iso-8859-1">[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]META [/COLOR][COLOR=#ff0000]NAME[/COLOR][COLOR=#0000ff]='keywords' [/COLOR][COLOR=#ff0000]CONTENT[/COLOR][COLOR=#0000ff]=''>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]META [/COLOR][COLOR=#ff0000]NAME[/COLOR][COLOR=#0000ff]='description' [/COLOR][COLOR=#ff0000]CONTENT[/COLOR][COLOR=#0000ff]=''>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]script [/COLOR][COLOR=#ff0000]type[/COLOR][COLOR=#0000ff]="text/javascript" [/COLOR][COLOR=#ff0000]src[/COLOR][COLOR=#0000ff]="accordion4/jquery.pack.js">[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]script[/COLOR][COLOR=#0000ff]>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]script [/COLOR][COLOR=#ff0000]type[/COLOR][COLOR=#0000ff]="text/javascript" [/COLOR][COLOR=#ff0000]src[/COLOR][COLOR=#0000ff]="accordion4/jquery.easing.1.3.js">[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]script[/COLOR][COLOR=#0000ff]>[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]script [/COLOR][COLOR=#ff0000]type[/COLOR][COLOR=#0000ff]="text/javascript" [/COLOR][COLOR=#ff0000]src[/COLOR][COLOR=#0000ff]="accordion4/leftNavMenu.js">[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]script[/COLOR][COLOR=#0000ff]>[/COLOR]
    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]style [/COLOR][COLOR=#ff0000]type[/COLOR][COLOR=#0000ff]="text/css">[/COLOR]
[COLOR=#008000]<!--[/COLOR]
[COLOR=#800000]* [/COLOR]{
    [COLOR=#ff0000]margin[/COLOR]:[COLOR=#0000ff]0[/COLOR]; 
    [COLOR=#ff0000]padding[/COLOR]:[COLOR=#0000ff]0[/COLOR];  
    [COLOR=#ff0000]font-family[/COLOR]:[COLOR=#0000ff]Arial, Helvetica, sans-serif[/COLOR];
    [COLOR=#ff0000]font-size[/COLOR]:[COLOR=#0000ff]11px[/COLOR];
    [COLOR=#ff0000]color[/COLOR]:[COLOR=#0000ff]#666[/COLOR];
    }
[COLOR=#800000]#leftnav [/COLOR]{
[COLOR=#ff0000]width[/COLOR]:[COLOR=#0000ff]160px[/COLOR];
[COLOR=#ff0000]margin[/COLOR]:[COLOR=#0000ff]0 5px 25px 0[/COLOR];
[COLOR=#ff0000]float[/COLOR]:[COLOR=#0000ff]left[/COLOR];
[COLOR=#ff0000]text-align[/COLOR]: [COLOR=#0000ff]left[/COLOR];
}
[COLOR=#008000]/* Category tree */[/COLOR]
[COLOR=#800000]ul.tree[/COLOR],[COLOR=#800000] ul.tree ul[/COLOR]{ [COLOR=#ff0000]list-style-type[/COLOR]:[COLOR=#0000ff]none[/COLOR]; }
[COLOR=#800000]ul.tree li[/COLOR]{
        [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]7px[/COLOR];
        [COLOR=#ff0000]margin-left[/COLOR]:[COLOR=#0000ff]5px[/COLOR];
}
[COLOR=#800000]ul.tree a[/COLOR]{ [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]2px[/COLOR]; [COLOR=#ff0000]text-decoration[/COLOR]:[COLOR=#0000ff]none[/COLOR]; [COLOR=#ff0000]border[/COLOR]:[COLOR=#0000ff]none[/COLOR]; }
[COLOR=#800000]ul.tree a.selected[/COLOR]{ [COLOR=#ff0000]font-weight[/COLOR]:[COLOR=#0000ff]bold[/COLOR]; }
[COLOR=#800000]#leftNavMenu [/COLOR]{
        [COLOR=#ff0000]padding[/COLOR]:[COLOR=#0000ff]0.5em 0.7em 0pt[/COLOR];
        [COLOR=#ff0000]background-color[/COLOR]: [COLOR=#0000ff]#fff[/COLOR];
        [COLOR=#ff0000]min-height[/COLOR]:[COLOR=#0000ff]20px[/COLOR];
}
[COLOR=#800000]#leftNavMenu ul.tree [/COLOR]{ [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]0.5em[/COLOR]; }
[COLOR=#800000]#leftNavMenu ul.dhtml[/COLOR]{ [COLOR=#ff0000]display[/COLOR]:[COLOR=#0000ff]none[/COLOR]; }
[COLOR=#800000]#leftNavMenu ul.tree li [/COLOR]{
        [COLOR=#ff0000]border[/COLOR]: [COLOR=#0000ff]none[/COLOR];
        [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]15px[/COLOR];
        [COLOR=#ff0000]margin-left[/COLOR]:[COLOR=#0000ff]0[/COLOR];
        [COLOR=#ff0000]font-weight[/COLOR]:[COLOR=#0000ff]bold[/COLOR];
        [COLOR=#ff0000]font-size[/COLOR]:[COLOR=#0000ff]13px[/COLOR];
        [COLOR=#ff0000]line-height[/COLOR]:[COLOR=#0000ff]13px[/COLOR];
        [COLOR=#ff0000]margin-top[/COLOR]:[COLOR=#0000ff]2px[/COLOR];
}
[COLOR=#800000]#leftNavMenu ul.tree li ul li[/COLOR]{
        [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]15px[/COLOR];
        [COLOR=#ff0000]background[/COLOR]:[COLOR=#0000ff]none[/COLOR];
        [COLOR=#ff0000]font-size[/COLOR]:[COLOR=#0000ff]11px[/COLOR];
        [COLOR=#ff0000]font-weight[/COLOR]:[COLOR=#0000ff]normal[/COLOR];
}
[COLOR=#800000]#leftNavMenu ul.tree li ul li ul li[/COLOR]{
        [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]15px[/COLOR];
        [COLOR=#ff0000]font-size[/COLOR]:[COLOR=#0000ff]9px;[/COLOR]
}
[COLOR=#800000]#leftNavMenu ul.tree a[/COLOR]{
        [COLOR=#ff0000]padding-left[/COLOR]:[COLOR=#0000ff]0[/COLOR];
        [COLOR=#ff0000]color[/COLOR]:[COLOR=#0000ff]#888[/COLOR];
}
[COLOR=#800000]div#leftNavMenu ul.tree a:hover[/COLOR]{
        [COLOR=#ff0000]text-decoration[/COLOR]:[COLOR=#0000ff]none[/COLOR];
        [COLOR=#ff0000]color[/COLOR]:[COLOR=#0000ff]#cc3399[/COLOR];
}
[COLOR=#800000]div#leftNavMenu ul.tree a.selected[/COLOR]{
        [COLOR=#ff0000]color[/COLOR]: [COLOR=#0000ff]#888[/COLOR];
        [COLOR=#ff0000]font-weight[/COLOR]: [COLOR=#0000ff]bold[/COLOR];
}
[COLOR=#800000]div#leftNavMenu span.grower[/COLOR]{
        [COLOR=#ff0000]display[/COLOR]:[COLOR=#0000ff]block[/COLOR];
        [COLOR=#ff0000]float[/COLOR]:[COLOR=#0000ff]left[/COLOR];
        [COLOR=#ff0000]background-position[/COLOR]: [COLOR=#0000ff]0px 3px[/COLOR];
        [COLOR=#ff0000]background-repeat[/COLOR]: [COLOR=#0000ff]no-repeat[/COLOR];
        [COLOR=#ff0000]width[/COLOR]:[COLOR=#0000ff]14px[/COLOR];
        [COLOR=#ff0000]height[/COLOR]:[COLOR=#0000ff]15px[/COLOR];
        [COLOR=#ff0000]margin[/COLOR]: [COLOR=#0000ff]0 0 0 -15px!important[/COLOR];
        [COLOR=#ff0000]margin[/COLOR]: [COLOR=#0000ff]0 0 0 -6px[/COLOR];
        [COLOR=#ff0000]padding[/COLOR]: [COLOR=#0000ff]0[/COLOR];
}
[COLOR=#800000]div#leftNavMenu span.OPEN [/COLOR]{ 
[COLOR=#ff0000]background-image[/COLOR]: [COLOR=#0000ff]url(contract.gif)[/COLOR];
[COLOR=#ff0000]cursor[/COLOR]:[COLOR=#0000ff]pointer[/COLOR];
}
[COLOR=#800000]div#leftNavMenu span.CLOSE[/COLOR]{ 
[COLOR=#ff0000]background-image[/COLOR]: [COLOR=#0000ff]url(expand.gif)[/COLOR];
[COLOR=#ff0000]cursor[/COLOR]:[COLOR=#0000ff]pointer[/COLOR];
}
[COLOR=#008000]-->[/COLOR]
    [COLOR=#0000ff]</[/COLOR][COLOR=#800000]style[/COLOR][COLOR=#0000ff]>[/COLOR]
[COLOR=#0000ff]</[/COLOR][COLOR=#800000]head[/COLOR][COLOR=#0000ff]>[/COLOR]
[COLOR=#0000ff]<[/COLOR][COLOR=#800000]body[/COLOR][COLOR=#0000ff]>[/COLOR]
[COLOR=#0000ff]<[/COLOR][COLOR=#800000]div [/COLOR][COLOR=#ff0000]id[/COLOR][COLOR=#0000ff]="leftnav">[/COLOR]            
    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]div [/COLOR][COLOR=#ff0000]id[/COLOR][COLOR=#0000ff]="leftNavMenu">[/COLOR]
        [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul [/COLOR][COLOR=#ff0000]class[/COLOR][COLOR=#0000ff]="tree dhtml">[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Cheerleading Uniforms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Double-Knit Cheer Uniforms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Nylon Strech Cheerleader Uniforms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Uniform Packages[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
             [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li [/COLOR][COLOR=#ff0000]class[/COLOR][COLOR=#0000ff]="selected">[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Pom Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]In-Stock Cheer Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Holographic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Metallic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Plastic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Youth Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]  
                   [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Custom Cheerleading Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Youth Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Flash Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Holographic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Metallic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Plastic Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                    [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Wetlook Poms[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]  
                [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
             [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Cheerleading Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Asics Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Adidas Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Chasse Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Converse Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Kaepa Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Nike shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Power Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
                [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Reebok Shoes[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
             [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
            [COLOR=#0000ff]<[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]<[/COLOR][COLOR=#800000]a [/COLOR][COLOR=#ff0000]href[/COLOR][COLOR=#0000ff]="#" >[/COLOR]Cheer Skirts[COLOR=#0000ff]</[/COLOR][COLOR=#800000]a[/COLOR][COLOR=#0000ff]>[/COLOR][COLOR=#0000ff]</[/COLOR][COLOR=#800000]li[/COLOR][COLOR=#0000ff]>[/COLOR]
        [COLOR=#0000ff]</[/COLOR][COLOR=#800000]ul[/COLOR][COLOR=#0000ff]>[/COLOR]    
    [COLOR=#0000ff]</[/COLOR][COLOR=#800000]div[/COLOR][COLOR=#0000ff]>[/COLOR]            
[COLOR=#0000ff]</[/COLOR][COLOR=#800000]div[/COLOR][COLOR=#0000ff]>[/COLOR]
[COLOR=#0000ff]</[/COLOR][COLOR=#800000]body[/COLOR][COLOR=#0000ff]>[/COLOR]
[COLOR=#0000ff]</[/COLOR][COLOR=#800000]html[/COLOR][COLOR=#0000ff]>[/COLOR]

Here’s the Javascript for leftNavMenu.js:

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

2

The code from my previous post performs a click action on the appropriate section which has the intended desired end-result of showing that section. It is that code which you would add to the jquery section of code that runs when the page is loaded.

Please let me know if you require any further guidence with this.

3

Hi Paul,

I need the list item to open on page load, not click. Since the list item is a link, setting the action to click would have no effect since the page would be re-loaded and un-do the effect.

Thanks for your continued help.

– Sandra

4

Thanks.

This here is how you would trigger the appropriately selected branch.


$('ul.tree.dhtml li.selected span').click();

Each click of that span toggles whether that particular section is open or closed.

5

Hi Paul,

It looks like I mistyped the sample page: http://www.omnicheer.com/test/index.html

The actual website is dynamic. The script that builds the navigation, automatically inserts the selected class into the correct list item. I don’t need to add an id to the body and li and do a comparison. All I need to do is have a bit of Javascript to find the li with the selected class and open it.

Unfortunately, I’m coming to the conclusion the my Javascript skills are in serious needs of updating. Everything I try either causes everything to open up or has no effect at all.

Thanks again for your continued help. The CSS trick is very neat.

– Sandra

6

The scripted solution to your problem depends on how the navigation is handled. I see that you currently place an explicit class on the navigation, which implies to me that you have a large numbers of copies of the navigation spread around.

There is a standard solution that means you only need to one version of the navigation, which involves placing an id attribute on the body tag:


<body id="pompoms">
</highlight]

and an id attribute on each of the top-level selections


```html4strict

&lt;li id="nav-pompoms" class="selected"&gt;&lt;a href="#"&gt;Pom Poms&lt;/a&gt;

Scripting can then use the value of the body tag to determine which of the navigation items to leave open.

Here’s a tutorial that takes you through the process.
ID Your Body For Greater CSS Control and Specificity and a video tutorial of [url=“http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/”]Current Nav Highlighting: Using PHP to Set the Body ID

If you’re willing to follow such a path, it makes the scripting easier as well. Let me know either way though, and we’ll see what we can do.

Oh, and you may want to get that test page of yours back up online too.

7

Hi Paul,
Thank you for your reply. Sorry for the lateness of mine, but I had to go out of town unexpectedly and came back to find I had bigger dragons to slay.

I think I need to explain things a little better. The sample page is a static page that is set-up as if it were the Pom Pom category page. The behavior I’m looking for is this: If you were on the site and clicked on Pom Poms category (or any other category with sub-category), you would be taken to the pom pom page and the nav would opens the category to reveal the sub-categories.

The problem is that its not opening the category you click on, but the first category in the nav. This is why when you go to the sample page the Cheerleading Uniforms category is opened even though you are on the Pom Pom page and it’s the pom pom’s li with the selected class.

With the correct Javascript fix, you should be able to reload the sample page and instead of the Cheerleading Uniform category being open, the Pom Pom category will be opened.

Paul, I think you are on the right track. You fix opens the category on click, but on the actually test site, when you click on a category, you are then taken to that page and that takes us back to square 1. If a top level category has the class “selected”, then it needs to open when the page is loaded. This isn’t a problem with any of the sub-categories, they work fine when the they have the selected class.

Thanks you for your help and I hope you will continue to do so.

– Sandra

8

I have a slightly different experience from the above explaination.

What I experience is that clicking on any of the top-level categories result in no scripted behaviour at all, which is why the existing category for cheerleading remains open.

The arrows are a span called “grower” so the link would want a similar event attached to it as well.

Adding an event to the links so that they trigger the grower, appears to be a viable solution.


$('ul.tree.dhtml a').click(function () { $(this).prev().click() });