JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="div"></div>
<button id="left">Slide left</button>
<button id="right">Slide right</button>

CSS

.div{
  width:300px;
  height:200px;
  background:red;
  display:none;
}
#left{
  position:absolute;
  top:210px;
}
#right{
  position:absolute;
  top:210px;
  left:74px;
}

JavaScript

$('#left').click(function(){
if($('.div').is(':visible')){
$('.div').hide('slide',{direction:"left"},700);
}else{
$('.div').show('slide',{direction:"left"},700);
}
});

$('#right').click(function(){
if($('.div').is(':visible')){
$('.div').hide('slide',{direction:"right"},700);
}else{
$('.div').show('slide',{direction:"right"},700);
}
})