jquery index() - hover list item, show content with same index

jquery

Solution

I'd probably use the hover() method to simplify this (or the hoverIntent plugin, which solves a few other problems like issues with rapid mouse movement).

$(function() {
     $('#leftnav li').hover(
          function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).show();
          },
          function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).hide();
          }
      }):
});

Problem

I'm having a jquery issue with a small menu I have. I have a list of menu items. When I hover over one of the list items, I would like to show the content from a list of divs that shares the same index as the list item. This needs to be dynamic do allow any number of menu items and content items. ``` $(document).ready(function() { $("#leftnav li").each(function(){ $(this).mouseover(function() { //SHOW div that shares same index as this li }); $(this).mouseout(function() { //HIDE div that shares same index as this li }); }); }); <ul id="leftnav"> <li>Link 1</li> <li>Link 2</li> </ul> <div id="content"> <div>Content 1</div> <div>Content 2</div> </div> ```

Original source