Expand Menu Dropdown if viewing parent page in WordPress

Today I was faced with auto expanding a sidebar drop down if we were viewing that parent category. In the past, at other design firms I have worked for, our solution was a complicated JavaScript URL sniffer that would match the current URL to the URL found in the menu. That never settled well with me. So I sought out to figure out a better way to do so.

Check out the demo at jsFiddle. I’ll have an actual Demo and option to download the Source in time, after I have found the time at least :P

Generate the HTML from wp_list_categories()

What I found is good ol’ WordPress already takes care of this for us. So let’s say we are using the _wp_listcategories function to list out all categories. In this very instance, I am building a Woocommerce site so my code looks like this:

<ul id="side-menu">
<!–?php wp_list_categories('taxonomy=product_cat&orderby=slug&order=ASC&exclude=23,22,21&title_li='); ?–>
<!–[END #side-menu]–>

To summarize what is going on here, I am requesting all categories in the custom taxonomy _productcat, this is set up from Woocommerce by default, and ordering all categories in that taxonomy to be sorted in alphabetical order by the slug, or URL. We are also excluding out three categories and leaving the title blank.

This will then return HTML like this:

&lt;ul id="side-menu"&gt;
<ul>
<li class="cat-item cat-item-33"><a title="View all posts filed under Category 1" href="http://www.domain-name-here.com/product-category/category-1/">Category 1</a></li>
<li class="cat-item cat-item-16 current-cat"><a title="View all posts filed under Category 2" href="http://www.domain-name-here.com/product-category/category-2">Category 2</a>
<ul class="children">
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 1" href="http://www.domain-name-here.com/product-category/category-2/sub-category-1">Sub-Category 1</a></li>
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 2" href="http://www.domain-name-here.com/product-category/category-2/sub-category-2">Sub-Category 1</a></li>
<li class="cat-item cat-item-17"><a title="View all posts filed under Sub-Category 2" href="http://www.domain-name-here.com/product-category/category-2/sub-category-2">Sub-Category 2</a></li>
</ul>
</li>
</ul>

All the classes here are WordPress generated and 99% of these are not relevant to making this functionality work, but I included them here so you have a good idea of what our generated code will look like. Now the beauty of this function is that it auto adds two classes called “current-cat“ or “current-cat-parent“ to the category we are currently viewing as shown in Line 3 above. The second class listed will be applied to the parent category if we are viewing a sub-category. We’ll make use of this also in our jQuery. AWESOME! We can use these classes in our jQuery code that we use for expanding and contracting our sub-categories.

Add the jQuery

Now that we have our HTML generated we need to build the jQuery menu. This is pretty straight forward really.

jQuery(document).ready(function($) {
$('#side-menu > li > ul').hide().click(function(e) {
e.stopPropagation();
});

var current_cat = $(&#039;#side-menu &gt; li.current-cat, #side-menu &gt; li.current-cat-parent&#039;);

if(current_cat.length == 1) {
    current_cat.children(&#039;ul&#039;).slideDown();
}

$(&#039;#side-menu &gt; li &gt; ul.children&#039;).each(function() {
    $(this).parent().toggle(function() {
    $(this).find(&#039;ul&#039;).slideDown();
}, function() {
    $(this).find(&#039;ul&#039;).slideUp();
});    
});

});
Let’s explain the code above..

  1. First we wrap our code in the Document Ready wrapper. This will execute our script after the DOM has loaded. Since WordPress by default runs jQuery in no Conflict mode, I like to specify it first by calling the jQuery handle and then defining the dollar symbol in the function field so I can use the shorter version in my script.
  2. Next we select each sub-category UL and hide them. We also remove the default function of the a tag on these elements so they don’t try to redirect the page when we want to view the sub-categories.
  3. We then setup a variable called _currentcat which will holde our DOM selections. We’ll select two spots, when the class current-cat or current-cat-parent are present.
  4. Next we’ll check to see if any of our classes are present in the DOM by calling our current_cat variable and checking if it is present. If so, we then slideDown the child UL element.
  5. Now we’ll animate our sub-categories to expand down when clicked. We’ll first select each UL with a class of children and tell it to slideDown when clicked, and if we click it again we’ll slideUp to hide the sub-categories again.
    And there we have it! Of course you can add some CSS to give it styling, but it’s not required to make this feature run. You can check out the demo at jsFiddle and you can grab the CSS there for base styling if you wish. I’ll eventually update this to have a Demo and an option to download the Source. This is my first article that I needed this option and will have to investigate further to make this happen properly when I have the time :P

Leave your comments if you have any!