JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div>

<div id="slideout">
    <div id="clickme"> X
    </div><div id="slidecontent">
        Yar, there be dragonns herre!
    </div>
    
</div>

</div>

CSS

#outer{width:100%;position:relative;overflow:hidden;}
#slideout {
    background: #666;
    position: absolute;
    width: 300px;
    height: 80px;
    top: 45%;
    right:-280px;
}
    
#clickme {
    float: left;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
}

JavaScript

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'});
    }, function () {
        $(this).parent().animate({right:'-280px'});
    });
});