JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="parent">
    <div class="content"></div>
    <div class="handle"></div>
</div>

CSS

.parent{
    width: 60%;
    height:400px;
    position:relative;
}

.content{
    width:80%;
    height:100%;
    float:left;
    background: gray;
    position:relative;
}
.handle{
    width:20%;
    height:100%;
    background: yellow;
    float:left;
    position:relative;
}

JavaScript

$(function(){
   var isOpen = false;
    var width = $('.content').width();
    console.log(width);
 	$('.handle').on('click', function(){
    if(!isOpen){   
		$(this).siblings('.content').animate({left: -width}, 1000, 'swing');
        $(this).animate({left: -width}, 1000, 'swing');
    } else {
        $(this).siblings('.content').animate({left: 0}, 1000);
        $(this).animate({left: 0}, 1000, 'swing');
    }
    isOpen = !isOpen;
	});
});