JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<div></div>

<button id="showMenu">Show Menu</button>
<button id="hideMenu">Hide Menu</button>

CSS

div{
     width:200px;
     height:200px;
     background-color:#ccc;
     -webkit-transition:margin-left 0.7s ease; 
}
.showMenu{
     margin-left:150px;   
}.hideMenu{
     margin-left:0px;   
}

JavaScript

$(function(){
    $('#showMenu').click(function(){
        $('div').removeClass('hideMenu');
        $('div').addClass('showMenu');
    });
      $('#hideMenu').click(function(){
        $('div').removeClass('hideMenu');
        $('div').addClass('hideMenu');
    });
});