Possible Duplicate: JQuery slideToggle timeout I have simple html page: <!DOCTYPE HTML PUBLIC -//W3C//DTD

Question

0

Editorial Team

Asked: May 25, 20262026-05-25T20:32:23+00:00 2026-05-25T20:32:23+00:00

Possible Duplicate: JQuery slideToggle timeout I have simple html page: <!DOCTYPE HTML PUBLIC -//W3C//DTD

0

Possible Duplicate:
JQuery slideToggle timeout

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() {

          $("div").hide();

          $("button").hover(function() {
              $("div").slideDown("slow");
          });

          setTimeout(hidepanel, 4000);

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

          $('div').mouseleave(function() { setTimeout(hidepanel, 4000); });
          $('button').mouseleave(function() { setTimeout(hidepanel, 4000); });
      });
  </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:

Show the panel (div) while mouse cursor is over the button or over the panel (div)
Hide panel when mouse is not over button or panel for 4 seconds
Hide panel immediately when I click on the page on any place outside the panel or button.

What should I change im my code?

Thanks a lot!