JSFiddle - React, Tailwind, and code Playground

by bruno

HTML

<script src="https://raw.github.com/cowboy/jquery-outside-events/v1.1/jquery.ba-outside-events.min.js"></script>
<div id="mydiv"></div>
<div id="toggleDiv"></div>

CSS

#mydiv {
    height: 100px;
    width: 100px;
    background-color: black;
}
#toggleDiv {
    height: 100px;
    width: 100px;
    background-color: yellow;
    margin: 30px;
}

JavaScript

$(document).ready( function() {
    $("#mydiv").on("clickoutside", function( ) {
        $("#mydiv").hide();
    });
    $("#toggleDiv").on("click", function( e ) {
        $("#mydiv").toggle();
        e.stopPropagation();
    });
});