CODEWITHSUNDEEP
javascriptjqueryhtmlhovertoggle
Peter Boomsma
Peter Boomsma

Reputation: 9808

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://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?

Upvotes: 0

Views: 4080

Answers (3)

kei
kei

Reputation: 20491

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

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

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

Upvotes: 3

Piyush Sardana
Piyush Sardana

Reputation: 1758

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

Upvotes: 0

Related Questions