Edit in JSFiddle

$(function() {
    
    $('#open').on('click', function() {
        if($(this).text()=='Open')
        {
            $('#box1').animate({
                right: '50%'
            }, 500, function() {
                $('#open').text('Close');
            });
        }
        else
        {
            $('#box1').animate({
                right: '20%'
            }, 500, function() {
                $('#open').text('Open');
            });            
        }
    });

});
<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>
    #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;
    }