JSFiddle - React, Tailwind, and code Playground

by Kitson Broadhurst

HTML

<div class="site-main" id="main">

<div class="main-content" id="main-content">
    <div class="closeContent"><i class="fa fa-times"></i></div>
    <div class="content-area" id="primary">

        <article class="post-22 page type-page status-publish hentry" id="post-22">

           <div class="innerRightCol">
               <h2>Text</h2>
           </div>

        </article><!-- #post-## -->
    </div><!-- #primary -->
</div><!-- #main-content -->

</div>

CSS

.site-main {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    margin-left: 255px;
    position: relative;
    top: 0;
    width: 560px;
}

JavaScript

$(document).ready(function() {
    $(".innerRightCol").click(function (){
        $(".site-main").animate({margin-left:'-=255px'}, 750);
    });
});