JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<div id="showDiv"> show </div>
<div class="toolbarContent">
    Test Div
        Test Div    Test Div    Test Div    Test Div
        Test Div
    <br>
            Test Div
            Test Div    Test Divv
            Test Div<br>
            Test Div
            Test Div
            Test Div    Test Div
</div>

CSS

.toolbarContent{
background-color:red;
    height:100px;
    width:150px;
    top:100px;
    right:0;
    position:absolute;
    overflow:auto;
    max-height:190px;
}

JavaScript

var $container = $(".toolbarContent");
$(document).mouseup(function (e) {
        if (!$container.is(e.target) // if the target of the click isn't the container...
            && $container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $container.hide("slow");
        }
    });

$('#showDiv').click(function () {
$container.show();
});