JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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%;
}

JavaScript

$(document).ready(function() {       
    $('#triggermap').click(function() {
        var map = $(".schememap");
        
        map.stop();
        
        if(map.is(':visible')) {
            map.animate({ right:493, opacity: 0 }, 1200, function() {
               $(this).hide().css('right', 0);
            });
        }
        else {
            map.show().animate({ right:193, opacity: 1 }, 1200);}	    
    }); 
    
    
});