Jquery hover triggers sliding box, help?

Question

I have the following code:

        <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
         // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
          $('#slickbox').hide();
        $('#slick-slidetoggle').hover(function() {
            $('#slickbox').slideToggle(400);
            return false;
          });
        });
        </script>

        <style>
        #slickbox {
        background: #EEE;
        border: 1px solid #900;
        height: 135px;
        }
        </style>
        </head>
        <body>
        <a href="#" id="slick-slidetoggle">Slide toggle the box</a>

        <div id="slickbox" style="display: block; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
        </body>
        </html>

I have also put this in jsfiddle for convenience: http://jsfiddle.net/WFf9X/

I need help in acheiving the following:

I want to be able to rollover the text : Slide toggle the box and that the box should open but I should also be able to move the cursor in the box, without it closing. Only when the cursor leaves the box or text Slide toggle the box, the box should then close after 400ms.

Thanks for the help.

score 2 · Accepted Answer · answered Jul 24 '11 at 23:29

Start by making the #slick-slidetoggle a child of your <a>:

<a href="#" id="slick-slidetoggle">
    Slide toggle the box
    <div id="slickbox" style="display: none; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</a>

Fiddle: http://jsfiddle.net/ambiguous/WFf9X/1/

That way, you'll still be hovering over the <a> when the mouse is inside the <div>. The problem with this is that it makes the whole <div> part of the link but you can clean that up by using something else instead of the <a> and moving the <a> inside that "something else":

<div id="slick-slidetoggle">
    <a href="javascript:void(0)">Slide toggle the box</a>
    <div id="slickbox" style="display: none;">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</div>

Fiddle: http://jsfiddle.net/ambiguous/WFf9X/2/

Jquery hover triggers sliding box, help?

1 Answers1