JSFiddle - React, Tailwind, and code Playground

by mickeymoon

HTML

<!-- Consider this div to be document -->
<div id="doc">
    This div is the document.
    <button id="culprit">Button with a handler</button>
    <div style="height:100px"></div>
    <div id="div_to_close">Div to Close</div>
    
</div>
<div id="out-of-doc">
    <button id="re-test">Re-test</button>
</div>

CSS

#div_to_close {
    width: 100px;
    height: 100px;
    background-color: #aaa;
    text-align: center;
}
#doc{
    display: inline-block;
    width: 400px;
    height: 400px;
    background-color: #eee;
}
#out-of-doc{
    display: inline-block;
    width: 100px;
    height: 400px;
}

JavaScript

$('#doc').click(function(){
    if($("#div_to_close").is(":visible")){
        $("#div_to_close").hide();
    }
});

$("#div_to_close").click(function(e){
     e.stopPropagation();
});

$("#culprit").click(function(e){
   //do something
    e.stopPropagation();
});

$("#re-test").click(function(e){
    $("#div_to_close").show();
});