WordPress jQuery Toggle based on category

1 Views

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:

Read More
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.

Post Views: 1

Related posts

Leave a Reply

2 comments

  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.

  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.