CODEWITHSUNDEEP
jquerymenufade
Jony Kale
Jony Kale

Reputation: 189

Simple jQuery slideDown doesn't work for two

Problem:

I have 2 slide downs, kind of a menu.

<div id="one" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla2</div>

And this jQuery script:

<script>
$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    });
});
</script>

The main idea is to slide down #block1, if you hover #one, and slide down #block2 if you hover #two

But there is the problem:

When hovering #one, It works fine.

But when you hover #two, nothing happens.

If you hover #one and then #two, it will work, but at the end it will slideDown #block1 again. I have no idea what causing it?

Question

What have I done wrong? How do I make it so when you hover #one, it toggles #block1, and when I hover #two, it toggles #block2.

I just started learnign jQuery, and really confused of the syntax. Thanks!

Upvotes: 0

Views: 351

Answers (4)

Denny Smith
Denny Smith

Reputation: 113

Another idea. There was a spelling issue on "height" and you could try the blocks contained within the divs.

I changed a few things and it works here http://jsfiddle.net/G3BuZ/1/

$(document).ready(function() {
        $("#one").hover(function() {
        $("#block1").slideDown("slow");
    });
        $('#one').mouseleave(function() {
        $("#block1").slideUp("slow");
    });
        $("#two").hover(function() {
        $("#block2").slideDown("slow");
    });
        $('#two').mouseleave(function() {
        $("#block2").slideUp("slow");
    });  

});

Upvotes: 1

Eli
Eli

Reputation: 14827

Hover take two handlers: when the mouse pointer enters and leaves the elements. It should work if you use mouseover or add another handler for your hover method

Your HTML and CSS got problem so I will take this HTML as an example:

<div id="one" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: right;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: right; display: none;">Blabla2</div>

jQuery:

$(".div").each(function(i) {
    var index = i + 1;
    $(this).hover(
      function () {
        $(this).siblings("#block" + index).slideDown("slow");
      },
      function () {
        $(this).siblings("#block" + index).slideUp("slow");
      }
    );
});

Working Demo

Upvotes: 2

mrks
mrks

Reputation: 8343

Actually, your code is working. If you move over the right box, you will have Blabla2 in there. The problem is that the left div with Blabla is hidden, so Blabla2 floats to the very left, not under #two. You will need to change your CSS for that.

Upvotes: 0

What have you tried
What have you tried

Reputation: 11148

Working fiddle:

http://jsfiddle.net/HKNDY/3/

This works - hover has two parts (hover on and hover off). You need to make the block slide back up when the mouse hovers off the div.

$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    }, function(){
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    }, function(){
         $("#block2").slideToggle("slow");
    });
});

Upvotes: 0

Related Questions