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:

<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>

<div class="wrap">
  <ul class="nav">
     <li class="yellow"><a href="./" class="y_button">Fiducairy services</a></li>
     <li class="green"><a href="./" class="g_button">Licensing</a></li>
     <li class="blue"><a href="./" class="b_button">Payment processing</a></li>
     <li class="orange"><a href="./" 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