CODEWITHSUNDEEP
jqueryslidetoggle
Dustin Laine
Dustin Laine

Reputation: 38513

jQuery slideToggle stay open on hover

I have a div that I have bound the jQuery hover event to activate a slideDown using slideToggle: 

<div class="Square">
    <div class="RedSquare"></div>
    <div class="GraySquare"></div>
</div>

$("div.RedSquare").hover(
    function() {
        $(this).siblings("div.GraySquare").slideToggle("fast");
    },
    function() {
        $(this).siblings("div.GraySquare").slideToggle("fast");
    }
);

It toggles a div '.GraySquare' right below it. Basically making a gray box slide down from the red box. The problem I am facing is that when the mouse moves over the gray div the slide toggles up. I want it to remain down when hovering over the red or gray square.

Any help is appreciated.

Upvotes: 3

Views: 12328

Answers (1)

Alconja
Alconja

Reputation: 14873

Change it so the hover is active on the containing "Square" div:

$("div.Square").hover(
    function() {
        $(this).find("div.GraySquare").slideToggle("fast");
    },
    function() {
        $(this).find("div.GraySquare").slideToggle("fast");
    }
);

Upvotes: 7

Related Questions