WordPress jQuery Toggle based on category

Question

I have the following Nav:

<li id="categories">
    <ul>
        <li class="cat-item cat-item-8 current-cat"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
            </ul>
        </li>
        <li class="cat-item cat-item-10"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a>
                    <ul>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

and the following JS:

jQuery("#categories li.cat-item").each(function(){
    var item = jQuery("<span>").addClass('plus'),
        that = jQuery(this);

    if ( that.has("ul").length ) {   
        item.click(function(e){
            var self = jQuery(this);
            self.text( self.text() === "+" ? "-" : "+" )
                .parent().next().toggle();
            e.preventDefault();
        }).text('+');

        that.find(".children").hide();
    }

    that.children("a").prepend( item );
});

This builds a nice toggle menu for my categories.

However what I want it to do is based on what category I am currently viewing show the corresponding menu to be opened when the user lands on the page. This needs to work for both posts and categories.

Thanks.

Answer 1

Just put this after your code:

jQuery('#categories .current-cat span.plus:first').click();

which simulates a click on the first plus sign in the current category.

If you want to have the whole tree to be expanded, just omit the :first:

jQuery('#categories .current-cat span.plus').click();

Btw the menu did not collapse as I tried it, I had to change your code to that.children("ul").hide();

Update:

If .current-cat is on a li element in a subtree, you can do this:

jQuery('#categories .current-cat').parents('li:not(#categories)')
                                  .andSelf()
                                  .find('span.plus:first').click();

This finds every parent li, includes the current li (andSelf(), in case it is the again a root of a subtree) and clicks the first + sign in each of these.

Answer 2

Have Wordpress insert the category name into an ID on a parent container (say the BODY tag) and then write the CSS for each category/ID pair that opens the corresponding menu.