JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div class="container">
    <button id="filterbtn" type="button" class="btn btn-primary btn-lg">Filter
    </button>
</div>

<div id="filterpanel">
    <button id="closebtn" type="button" class="btn btn-default btn-sm pull-right">close
    </button>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.container{
    margin-top:30px;
}

#filterpanel{
    position: absolute;
    background-color: #333333;
    width: 340px;
    margin-top:30px;
    padding:15px;
    height: 400px;
    left: -340px;
	-webkit-transition: left .2s ease;
	   -moz-transition: left .2s ease;
	    -ms-transition: left .2s ease;
	     -o-transition: left .2s ease;
	        transition: left .2s ease;
}

#filterpanel.open {
    left: 0;
}

JavaScript

$( "#filterbtn" ).click(function() {
    $("#filterpanel").toggleClass('open');

});

$( "#closebtn" ).click(function() {
    $("#filterpanel").removeClass('open');
});