JSFiddle - React, Tailwind, and code Playground

by Bondye

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').live('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').live('click', function() {
        $('#box1').animate({
            right: '20%'
        }, 500, function() {
            $('#close').text('Open').attr('id', 'open');
        });
    });
});