I’m currently working on a new project and I’ve been pondering on the net on how to collapse my menu via the WP E-Commerce Plugin. At the moment I simply have a widget that basically displays every top level and child categories out.

Finally, I’ve found my solution burried in their forums, thanks to a wiz in their forums.

You open up your editor and copy this code:

//<![CDATA[
(function($)
{
$(document).ready(function()
{
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");

$(".CatExpander").click(function()
{
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide();
});
})(jQuery);
//]]>

Open up your theme folder and create a new folder named “js” and save the file as “collapse.js” in there. Note that the name and folder of which you save this file is really much of your preference.

Now open up your header and copy this code just below the part that says “wp_head();” :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/collapse.js"></script>

As you can see, you simply call upon the .js file found in the “js” folder of your current theme… or you replace the path accordingly.

Now what you’re supposed to have is a widget / category menu that is initially expanded. To have this initially collapsed, you simply go edit a little line of CSS and have the second level categories of this widget display: none as such:

.wpsc_second_level_categories {
display: none
}

What this does is not display the second level categories initially. But should users click on the [+] sign, it jQuery will take command from there and expand/collapse the menu.

You can then style the [+] to however you like and maybe even append an image background of your choice by simply allocating properties for .CatExpander in your css file.