Home/ Questions/Q 6606737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:25:40+00:00

I have simple html page: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html>

  • 0

I have simple html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
      $(document).ready(function() {

          $("button").click(function() {
              $("div").slideToggle("slow");
          });

      });
  </script>

  <style>
  div { width:400px; }
  </style>
</head>
<body>
  <button>Toggle</button>
  <div style="border: 1px solid">

    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </div>
</body>
</html>

I need to hide the div panel automaticaly after 10 seconds if my mouse cursor isn’t over the panel.
How can I do it (change the code above) to implement that?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check http://jsfiddle.net/XRYLk/3/

    I added mouseleave so in case the mouse was over it when first function fires up, it will set timer on mouseleave.

    jQuery:

        $("button").click(function() {
        $("div").slideToggle("slow");
    });

setTimeout(hidepanel, 4000);

function hidepanel(){
    if($('div').is(':hover') === false){ $('div').slideToggle(); }
}

 $('div').mouseleave(function(){ setTimeout(hidepanel, 4000); });
    • 0