How to change the div when i hover a li

Question

My intention

When i hover over a li on #featuredThumbs li I want to swap the div under #productText

How can I accomplish this? I want to add a active state to both the li and div . I also want it to automatically start when the page loads.

Here is my jsFiddle File

JS

 $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
});​

HTML

<div id="container">
  <h2>Lorem ipsum!</h2>
  <div id="featuredProducts">
    <div id="productText">
      <div id="autoText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="homeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="commercialText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="lifeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->

    </div>
    <!-- eo: productText -->
    <ul id="featuredThumbs">
      <li id="autoProd"></li>
      <li id="homeProd"></li>
      <li id="commercialProd"></li>
      <li id="lifeProd"></li>
    </ul>
  </div>
  <!-- eo : featuredProducts -->

</div>
​

Answer 1

try this

     $("#featuredThumbs li").hover( 
     function(){
           $(this).addClass("active");
           $(this).append($('#'+$(this).attr('id').replace('Prod','Text')).html());
         },
     function(){
           $(".active").removeClass("active");
           $(this).html("");
        }
     );​

DEMO

Answer 2

You can do it like this:

// activate first item
$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active");

// set hover handler
$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    $(this).addClass("active");

    // find div id based on li id
    var liId = $(this).attr('id');
    var liIdParts =  liId.split("-");
    var divId = liIdParts[0] + "Text";

    $("#" + divId)
        .addClass("active")
        .show()
        .siblings()
        .removeClass("active")
        .hide();    
});​

DEMO

UPDATE: with auto switching

DEMO

var nextLi;
var autoSwitch = setInterval(function(){
    var firstLi = $("#featuredThumbs li:first");

    if(nextLi == undefined){
        nextLi = firstLi;
    }else{
        nextLi = nextLi.next("li");
        nextLi = (nextLi.length == 0) ? firstLi : nextLi;
    }  
    switchToDivForLi(nextLi);    
}, 3000);

$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active");

$("#featuredThumbs li").hover( function() {
    switchToDivForLi($(this));

    if(autoSwitch != undefined){
        clearInterval(autoSwitch);  
    }        
});

function switchToDivForLi(liElement){
    $(".active").removeClass("active");
        liElement.addClass("active");

        var liId = liElement.attr('id');
        $("#" + liId.replace("Prod", "Text"))
            .addClass("active")
            .show()
            .siblings()
            .removeClass("active")
            .hide(); 
}

Answer 3

I think, this may help you:

CSS:

.products { display:none; }
.products.active { display:block; }

JS:

$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    var textid = this.id.replace("Prod", "Text");
    $(this).addClass("active");
    $("#" + textid).addClass("active");
});​

This works as long as the id of the li elements ends in 'Prod' and the matching text ends in 'Text'. I also added the class active to the first div.

http://jsfiddle.net/KfEuL/

Answer 4

Is this what you're looking for?

$(function() {
    $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show()
    });
});​​

Don't forget to change the titles for the product divs so you can tell them apart (right now they all say "Auto Insurance"). I also added this to the css:

.products { display: none; }

---

To make it cycle automatically, this is the full code:

var intervalLen = 1000; //milliseconds 
$(function() {
    $("#featuredThumbs li").mouseover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show();

          clearInterval(interval);
    });

    $("#featuredThumbs li").mouseout(function() {
        interval = setInterval(showNext,intervalLen);
    });
});

function showNext() {
    var visible = $('div', $('#productText')).not(':hidden');
    var next = visible.next('.products'); 
    if(next.length == 0) {
        next = $('div:first-child', $('#productText'));
    }
    visible.hide();
    next.show();
}

var interval;
​$(function() {
    interval = setInterval(showNext,intervalLen);
});

And the extra line of CSS changes to:

.products:not(:first-child) { display: none; }

It will not cycle when the user hovers over one item because the onmouseover event stops the interval and the onmouseout restarts it. You can change the speed of the cycle by changing intervalLen

Answer 5

Do you mean something like this?

document.getElementById('featuredThumbs').onmouseover = function() {
  document.getElementById('productText').innerHTML = 'swap';
}