JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sidebar"></div>
<button id="buttonsidebar"><b> <| </b></button>
CSS
#sidebar {
width:100px;
height:500px;
background:#000;
position:absolute;
border-radius: 15px;
border-style:outset;
left: -100px;
}
#buttonsidebar {
border-radius: 100px;
border-style:outset;
border-width:medium;
box-shadow: 2px 2px 10px #000;
}
JavaScript
flag = false;
$sidebar = $('#sidebar');
$button = $('#buttonsidebar');
$('button').click(function () {
if (flag) {
$sidebar.animate({
'left': '-100'
});
$button.animate({
'left': '-100px'
});
flag = false;
} else {
$sidebar.animate({
'left': '0px'
});
$button.animate({
'left': '0px'
});
flag = true;
}
});