Jquery Hover Show Div Toggle

I'm working on this pretty easy site but it's been a while since I fiddled with jQuery and I think I'm doing something wrong here. Here you can preview the idea with jsFiddle http:

Solution 1:

First of all: Don't use same id name with another tag. In your example it was id="slider" .

Here is jsFiddle to play with (I have edited your html and css too)

You can do that with this way, much more solid:

jQuery:

jQuery(document).ready(function() {

    $('.greenC, .blueC, .orangeC').hide();

    $('.nav li').hover(function() {
        var takeClass = $(this).attr('class');
       // takes class hovered element. example: '.yellow'

        $('.slider').hide();
        $('.'+ takeClass + 'C').show();// shows the element '.yellowC'
    });

});​

And your html should be like this:

<divclass="yellowC slider">...</div><divclass="greenC slider">...</div><divclass="blueC slider">...</div><divclass="orangeC slider">...</div><divclass="wrap"><ulclass="nav"><liclass="yellow"><ahref="./"class="y_button">Fiducairy services</a></li><liclass="green"><ahref="./"class="g_button">Licensing</a></li><liclass="blue"><ahref="./"class="b_button">Payment processing</a></li><liclass="orange"><ahref="./"class="o_button">E-zone colocation</a></li></ul></div>​

Solution 2:

$('.green, .blue, .orange, .yellow').hide(); if you hide yellow also, it works fine for me..is this what you want?

Solution 3:

If you want the first div to show up properly on load, you have to be more specific on your .yellow event handler

$('.y_active, .yellow').hover(
function() {
    $('.yellow').show();
    $('.green').hide();
    $('.blue').hide();
    $('.orange').hide();
}, function() {
    $('.yellow').hide();
});

DEMO