Hover function for accordion

Question

Thus far you guys have been wildly helpful with me getting this little ditty working just so. I have one further request:

This markup:

          <div id="themes">
          <h2>Research Themes</h2>
            <ul>
              <li class="tier_1"><a class="enviro" href="">Learn about our approach to the <strong>environment</strong></a>
                <ul class="tier_2 hide">
                  <li><a href=""><em>How we are tying this all together</em></a></li> 
                  <li><a href="off.html"><strong>Project:</strong> Solor Powered Biofactories</a></li> 
                  <li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li>
                  <li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li>
                </ul>
              </li>
              <li class="tier_1"><a class="health" href="">Learn about our approach to <strong>human health</strong></a>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              </li>
              <li class="tier_1"><a class="defense" href="">Learn about our approach to <strong>national defense</strong></a>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- // end themes -->

And this jQuery:

$(function(){
  $(".tier_1 > a").hover(function() {
    var currentList = jQuery(this).parents('li').find('.tier_2');
    $(currentList).slideToggle();
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp();
    return false;
  });
});

Create this nifty 'themes' slider you can see working on the right column of this page: http://clients.pixelbleed.net/biodesign/

I have two problems with it...The hover retracts the slideUp/down when you hit one of the links under a tier_2 ul. I'd like it to remain slideout as someone hovers the nested li's. So the slide should only happen on hover for the tier_1 elements. Also I would like, on hover to add an "active" class to the a element on the tier_1 links. So [a class="enviro"..] would, on hover, become [a class="enviro active"]. This is then removed when one of the other tier_1 items is hovered. This way the pretty color icon can stay visible while someone looks at the nested elements.

Not even sure all that is possible with hover, but I figured if anyone would know a way it would be here.

Answer 1

I think you probably want to have a mouseout handler on your themes DIV, which slides up all of the nested uls and a mouseover handler for each tier_1 anchor that closes the other nested uls and slides open it's nested ul. That way you only get the panels closing when you switch to a different panel or out of the thems div entirely. You could omit the mouseout if you wanted the last selection when in the themes DIV to remain selected.

$(function(){
  $('div.themes').mouseout(function() {
       $('.tier_2:visible').slideUp();
       $(this).find('a.active').removeClass('active');
  });
  $(".tier_1 > a").mouseover(function() {
    var $this = $(this);
    $this.closest('div').find('a.active').not($this).removeClass('active');
    $this.addClass('active');
    var currentList = $this.parents('li').find('.tier_2'); 
    $(currentList).not(':visible').slideDown(); 
    $('.tier_2:visible').not(currentList).slideUp(); 
    return false; 
  }); 
});