JSFiddle - React, Tailwind, and code Playground

by Pragnesh Chauhan

HTML

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>

CSS

#box1 {
      position:absolute;
      top:0;
      right:20%;
      bottom:0;
      left:0;
      background:#FF800D;
    }
    #box2 {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:80%;
      background:#FF045D;
    }
    button {
      position:absolute;
      bottom:50%;
      right:0;
    }

JavaScript

$(function() {    
    $('#open').toggle(function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close');
        });
    }, function(){
        $('#box1').animate({
            right: '20%'
        }, 500, function() {
            $('#open').text('Open');
        });
    });
});