JSFiddle - React, Tailwind, and code Playground
HTML
<p class="show_hide">Clcik Me</p>
<div class="slidingDiv"></div>
CSS
div{
width:200px;
height:150px;
background:#ccc;
}
p{
cursor:pointer;
}
JavaScript
// click to hide
$('html').click(function(event){
if($('.slidingDiv').is(':visible')){
$('.slidingDiv').hide();
}
});
//Toggle
$(".slidingDiv").hide();
$('.show_hide').click(function(event){
event.stopPropagation();
$(".slidingDiv").slideToggle();
});