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").data('positions',['4%','10%']);
_menu.click(function () {
    var data=_block.data('positions');
    data.push(data.shift());    
    _block.animate({
        'bottom': data[0]
    }, 300);
});