WordPress jQuery Toggle based on category
- by Cameron
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.
Thanks.
