Question

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://jsfiddle.net/rGb34/1/

There are a few problems with the jQuery.

1. If you hover over the yellow button the yellow content starts toggling.
2. If you hover over a button and then back off it the div disapears (due to the toggle function) but I would like to have the last div active even when there’s no hover.

Does anyone have a good tip for me so I can finish this?

Answer 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>​