JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div id="block" style="bottom: 4%;"></div>
<a href="#" id="menu">menu</a>

CSS

#block {
    background: red;
    bottom: 4%;
    height: 30px;
    position: absolute;
    width: 90%;
}
#test {
    background: #eee;
    height: 300px;
    position: relative;
}

JavaScript

var _menu = $("#menu");
var _block = $("#block");
_menu.click(function () {
    _block.toggleClass('lowPosition');
    var nextpos = _block.hasClass('lowPosition') ? '10%' : '4%';
    _block.animate({
        'bottom': nextpos
    }, 300);
});