JSFiddle - React, Tailwind, and code Playground
HTML
<span id="comment-button">test</span>
<div id="comment-drawer">
</div>
CSS
#comment-drawer {
background-color:#444;
height:600px;
float:right;
top:10px;
width: 0;
-o-transition:all .3s ease-in;
-webkit-transition:all .3s ease-in;
-moz-transition: all .3s ease-in;
transition:all .3s ease-in;
}
.drawer-open {
width:250px !important;
}
#comment-button {
position: static !important;
z-index: 9999;
padding:10px;
top:60;
right:0;
background:#444;
}
JavaScript
var isVisible = false,
commentDrawer = $('#comment-drawer'),
self = this;
console.log(commentDrawer);
$('#comment-button').click(function() {
if(isVisible) {
commentDrawer.removeClass('drawer-open');
isVisible = false;
} else {
commentDrawer.addClass('drawer-open');
isVisible = true;
}
});