JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

	<div class="curtainCover"></div>
	<div class="curtain curtainLeft" rel="open"></div>
	<div class="curtain curtainRight" rel="open"></div>

</div>

CSS

#container {width: 960px; height: 500px; margin: 100px auto; background: #333333; position: relative; overflow: hidden;}
		.curtainCover {width: 960px; height: 80px; box-shadow: 0px 15px 5px #111; background: #222; position: absolute; z-index: 5;}
		.curtainLeft {left: 0px;}
		.curtainRight {right: 0px;}
		.curtain {width: 480px; height: 500px; top: 0px; background: #22abab; position: absolute; z-index: 4; cursor: pointer;}

JavaScript

$(document).ready(function () {
		     $('.curtain').click(function(){
			    if ($('.curtain').attr('rel') == 'open'){
				        $('.curtainLeft').animate({"left":"-400px"}, "slow");
				        $('.curtainRight').animate({"right":"-400px"}, "slow");
				        $('.curtain').attr('rel', 'closed');
			    	
			    	} else if ($('.curtain').attr('rel') == 'closed'){

			        	$('.curtainLeft').animate({"left":"-0px"}, "slow");
			        	$('.curtainRight').animate({"right":"-0px"}, "slow");
			        	$('.curtain').attr('rel', 'open');
			   		}
			});
		});