Question

I am trying to get the Categories and Archives sidebar sections on a WordPress site (http://stoganews.com/) to display only when hovered over, using jQuery’s .slideToggle().

Here is the relevant HTML, from the Categories list.
The Archives list has exactly the same 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 the Javascript I am 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 see from the site, the code currently works with toggle(). But when I substitute slideToggle() for toggle(), the sections are never hidden, and nothing happens when they are hovered over. Why?

Issues I’ve made sure to avoid:

• jQuery is indeed included. It shows up in the source code as <script type='text/javascript' src='http://stoganews.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>.
• As far as I know, I am not using fixed panels, which cannot be animated.
• I have used jQuery() instead of $() – this is a limitation of WordPress.

P.S. My first question on stackoverflow!

Answer 1

I created a jsfiddle for this it seems to work. They don’t have jquery 1.6.1, the demo there is using 1.6.4. I did need to change jQuery('.catlist') to jQuery('.cats-list') on the 1st line of the javascript, it may have been that which is stopping it from working.