JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div class='wrapper'>
    <p id='triggermap'>show</p>
    <div class="schememap"></div>
</div>

CSS

.schememap {
    display: none;
    height: 234px;
    margin-top: 50px;
    opacity: 0;
    position: absolute;
    background: blue;
    right: 0;
    width: 500px;
}
#triggermap {
    border-bottom: 1px dashed;
    font-size: 20px;
    color: #0C5394;
    float: left;
}
.wrapper {
    width: 100%;
    height: 100%;    
    position: absolute;
}

JavaScript

$(function () {
    var map = $(".schememap");
    var $triggermap=$('#triggermap');
    var triggermap=$triggermap.get(0);
    function hide() {
        map.stop().animate({
            right: 493,
            opacity: 0
        }, 1200, function () {
            $(this).hide().css('right', 0);
        });

    }
   $('.wrapper').click(function (e){  
       console.log(e.target,triggermap);
       if (e.target === triggermap || e.target === map.get(0)) return;
        if (map.is(':visible')) {
            map.finish();
            hide();
        }
    });
    $triggermap.click(function () {

        map.finish();

        if (map.is(':visible')) {
            hide();
        } else {
            map.show().animate({
                right: 193,
                opacity: 1
            }, 1200);
        }
    });


});