JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="SideHide" title="Show/Hide Sidebar">HIDE SIDE</a>

<div class="Nav">
 SIDE BAR
</div>

<div class="Wrap">
 MAIN CONTENT
</div>

CSS

.Nav{
	background:#ccc;
	position:fixed;
	height:100%;
	width:200px;
}
.Wrap{
    background:#cdf;
	margin-left:200px;
    min-height:250px;
}

JavaScript

var flag = 0;
$('.SideHide').click(function() {
    if (flag == 0) {
		$('.Nav').fadeOut({complete: function(){
			$('.Wrap').animate({marginLeft: 0});
		}});
        flag = 1
    }
    else if (flag == 1) {
		$('.Wrap').animate({marginLeft: 200},{complete: function(){
			$('.Nav').fadeIn();
		}});
		flag = 0
    }
});