Question

I am using the following sliding div script:

http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the “panel” div.

Upon clicking the .btn-slide button a second time, the panel div is closed.

I am a complete newb at js, so any assistance would be appreciated. Here’s what I am trying to do:

1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).

I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.

Thank you in advance for the help.

Sincerely,

Mac

---

Here is the JS:

<script type="text/javascript"> 
jQuery(function($){
$(document).ready(function(){
    $('.btn-slide').click(function() {
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;

    });


});

 });

</script> 

here is the HTML currently being used:

<div id="prod_nav_tab">
<div id="panel"> 
    This is where stuff goes!
</div> 
<p class="slide"><a class="btn-slide">Table of Contents</a></p> 

</div>

I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).

div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}



a:focus {
    outline: none;
}
#panel {
    background-color:#F00;
    width: 200px;
    height: 200px; 
    display: none;
    position: absolute;
    bottom: 0px;
}
.slide {
    margin: 0;
    padding: 0;
    /* border-top: solid 4px #422410;  **Adds a line at top of slide button to distibuish it */
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: #d8d8d8;
    text-align: center;
    width: 200px;
    height: 31px;
    padding: 0px 0px 0 0;
    margin: 0 0 0 0;
    display: block;
    font: bold 12pt Arial, Helvetica, sans-serif;
    color: #666;
    text-decoration: none;
    position: relative;
cursor: pointer;
/*  background: url(images/white-arrow.gif) no-repeat right -50px;  ** Controls Arrow up/down */

}
.active {
    background-position: right 12px;
}

Answer 1

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.

To prevent this you should do something like:

HTML:

<div id="trigger">
    <a href="" class="btn-slide">Slide down</a>
    <div id="panel">
        Content of your panel
    </div>
</div>

JQuery:

jQuery(function($) { 
    $(document).ready(function() { 
        $("#trigger").mouseenter(function() {
            $("#panel").slideDown("slow"); 
            $(this).addClass("active"); 
        }).mouseleave(function() {
            $("#panel").slideUp("slow"); 
            $(this).removeClass("active"); 
        });
    }); 
});

Make sure in your CSS you then set the panel to be hidden from start…

div#panel {
     display: none;
}