JSFiddle - React, Tailwind, and code Playground
HTML
<button id="toggleButton">toggle menu</button>
<div id="container">
<ul>
<li>menu item one</li>
<li>menu item two</li>
<li>menu item three</li>
</ul>
</div>
CSS
#toggleButton {
float: none;
}
#container {
background-color: orange;
width: 450px;
height:100px;
position: absolute;
bottom: -450px;
}
JavaScript
var $rightMenu = $('#container');
var rightVal = parseInt($rightMenu.css('bottom'));
$('#toggleButton').click(function () {
animateRight = (parseInt($rightMenu.css('bottom')) == 0) ? rightVal : 0;
$rightMenu.animate({
right: animateRight + 'px'
});
});