JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<button id="btn">Toggle</button>
  


<div id="panel" 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>

CSS

div { width:400px; display: none; padding: 20px }

JavaScript

$("div").hide();

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

          setTimeout(hidepanel, 1);

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

          $('div').mouseleave(function() { setTimeout(hidepanel, 1); });
          $('button').mouseleave(function() { setTimeout(hidepanel, 1); });

$(document).click(function (e) {
    
        if (e.target.id !== "btn" && e.target.id !== 'panel' && $(e.target).parents('#panel').length === 0)
        {
           hidepanel(); 
        }
});