I'm looking to get the Groups and Archives sidebar sections on the Wordpress site (http://stoganews.com/) to show only if hovered over, using jQuery's .slideToggle().

This is actually the relevant HTML, in the Groups list. The Archives list has the identical structure.

<div class="catlist">
 <ul class="cats-list">
  <li>
   <h2><a href="#">CATEGORIES</a></h2>
   <ul class="list-alt">
    <li class="cat-item cat-item-71">
     <a href="http://stoganews.com/?cat=71" title="View all posts filed under Arts &amp; Culture">Arts &amp; Culture</a> (28)
    </li>
    <li class="cat-item cat-item-130">
     ...

This is actually the Javascript I'm using, in expand.js.

jQuery('.catlist').each(function(){
   // hides Categories section, Archives section
   jQuery('.list-alt',this).hide();

   // show section when hovered over
   jQuery(this).hover(function(){
      jQuery(this).find('.list-alt').toggle();
   });
});

As you can tell in the site, the code presently works together with toggle(). However when I substitute slideToggle() for toggle(), the sections will never be hidden, and absolutely nothing happens when they're hovered over. Why?

Issues I have ensured to prevent:

  • jQuery is definitely incorporated. It turns up within the source code as <script type='text/javascript' src='http://stoganews.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>.
  • So far as I understand, I'm not using fixed sections, which can't be animated.
  • I have tried personally jQuery() rather than $() - this can be a limitation of Wordpress.

P.S. My first question on stackoverflow!

I produced a jsfiddle for this it appears to operate. They do not have jquery 1.6.1, the demo there's using 1.6.4. Used to do have to change jQuery('.catlist') to jQuery('.cats-list') around the first type of the javascript, it might have been what is preventing it from working.