JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<body>
<span class="click">Acme</span>
<div class="box">Hello World</div>
    <div class="static">Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</div>
</body>

CSS

.click{cursor:pointer;display:block;}
.box{display:none;border:2px solid #CCC;width:200px;height:200px;padding:15px;margin:15px;}
body{background:yellow;height:800px;}

JavaScript

$(".click").on("click",function(e){
    $('.box').slideToggle(1000);
    e.stopPropagation();
});

$(".box").on("click",function(e){
      e.stopPropagation(); 
});

$("body").on("click",function(){
    $('.box').slideUp(1000);
});