JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="willSlide" id='content'></div>
<div class="willSlide" id='btn'>
    <span class="click">CLICK!</span>
    <span class="expandedTxt">Expanded!</span>
</div>

CSS

#content{
    position:fixed;
    height:100%;
    background:rgb(97, 97, 97);
    width:200px;
    right:0px;
    margin-right: -200px;
}
#btn{
position: fixed;
width: 100px;
right: 0px;
background: rgb(117, 231, 117);
top: 300px;
border-radius: 5px 0px 0 5px;
color: #fff;
text-align: center;
padding: 40px 0;
cursor:pointer
}
.expandedTxt{
  display:none   
}
#btn.expanded .expandedTxt{
 display:block   
}
#btn.expanded .click{
 display:none   
}

JavaScript

$(document).ready(function()
{
  var easing = 1 //enable or disable easing | 0 or 1
  var easing_effect = 'easeOutBounce';
  var animation_speed = 500 //ms
      
  var slider_width = $('#content').width();//get width automaticly
  $('#btn').click(function() 
  {
    //check if slider is collapsed
    var is_collapsed = $(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated');
      
    //minus margin or positive margin
    var sign = (is_collapsed) ? '-' : '+'; 
    
      if(!$(this).is(':animated')) //prevent double margin on double click
      {
        if(easing) $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed,easing_effect);
        else $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
      }
     //if you need you can add class when expanded
      (is_collapsed) ? $('.willSlide').removeClass('expanded') : $('.willSlide').addClass('expanded');

  });
 });