JSFiddle - React, Tailwind, and code Playground

by Avinashullal

HTML

<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>

<a href="#" id="slide">Show/hide Slide Panel</a>

CSS

.left, .hidden {
    float: left;
    height:350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    position:absolute;
    right:-1000px;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

JavaScript

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });
});