JSFiddle - React, Tailwind, and code Playground

by Marc

HTML

<div class="right">
		<div class="troggler">x</div>
		<div class="story">
			<h2>title</h2>
			<p>text...</p>
		</div>
	</div>

CSS

.right{position:fixed!important; top:50px; right:0; width:400px; background:#ccc;}
	.right .troggler{position:absolute; left:-25px; top:4px; width:25px; height:25px; line-height:25px; background:url(/assets/templates/v/img/troggle.png) 0 0 #333; display:block; background-position:0 0; color:#fff; text-align:center; cursor:pointer; cursor:hand;}
.story{padding:0 20px;}

JavaScript

$('.troggler').toggle(
	function() {
		$('.right').animate({"right": "-400px"}, "slow");
		$('.troggler').animate({"background-position": "-25px"}, "fast");
	}, function() {
		$('.right').animate({"right": "0"}, "slow");
		$('.troggler').animate({"background-position": "0"}, "fast");
})

$(window).resize(function() {
    if ($(window).width() < 740) {
        $(".right").animate({"right": "-400px"}, "slow");
        $('.troggler').animate({"background-position": "-25px"}, "fast");
    }
    else {
        $('.right').animate({"right": "0"}, "slow");
        $('.troggler').animate({"background-position": "0"}, "fast");
    }
});