JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.ewsprojects.com/~lyons/styles.css">
<div id="right_side_container">
<div id="right_new">
<div id="right_contain">
<a>
<div id="top_section">
<div id="tag_text">
Tag this<br>Picture
</div>
<img src="http://www.ewsprojects.com/~lyons/tag.png">
</div>
</a>
</div>
<div id="right_contain">
<a>
<div id="bottom_section">
<div id="submit_text">Submit<br>Picture</div>
<img src="http://www.ewsprojects.com/~lyons/add.png">
</div>
</a>
</div>
</div>
<div id="right_panel">
</div>
</div>
CSS
#right_panel {
display: block;
}
#right_new {
position: absolute;
right:300px;wsd
}
#right_side_container {
width: 300px;
right: -300px;
}
JavaScript
$(document).ready(function() {
$("#right_new").click(function() {
var $drawer = $("#right_side_container");
if ($drawer.hasClass('open')) {
$drawer.animate({right: '-300px'}, {queue:false, duration: 500});
$drawer.removeClass('open');
} else {
$drawer.animate({right: '0'}, {queue:false, duration: 500});
$drawer.addClass('open');
}
});
});