JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modhidden">Here I am !

<!--<a href="#" class="modslide">Update</a>-->

  <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a>
  
</div>

<div class="modhidden2">Here I am AGAIN!

<!--<a href="#" class="modslide2">Update</a>-->
  <a href="#" class="modslide2 col-xs-12 left-btn btn btn-primary">Update</a>
  
</div>

<div class="modleft">Left panel

<a href="#" class="modslide">Show ONE</a>

<a href="#" class="modslide2">The other ONE</a>

</div>

<div class="modclear"></div>

CSS

.modleft, .modhidden, .modhidden2 {
    float: right;
    width: 100%;
    height:350px;
}

.modhidden, .modhidden2 {
    width:100%;
    z-index:2;
    position:absolute;
    right:-1000px;
    background:#f90;
    color:#000;
}

.modleft {
    width:100%;
    float: left;
    height:350px;
    background: pink;
    color: #000;
}

.modclear {
    clear:both;
}

JavaScript

$(document).ready(function(){
    $('.modslide').click(function(){
    var hidden = $('.modhidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"right":"-1000px"}, "0").removeClass('visible');
    } else {
        hidden.animate({"right":"0px"}, "0").addClass('visible');
    }
    });
    
    $('.modslide2').click(function(){
    var hidden2 = $('.modhidden2');
    if (hidden2.hasClass('visible')){
        hidden2.animate({"right":"-1000px"}, "0").removeClass('visible');
    } else {
        hidden2.animate({"right":"0px"}, "0").addClass('visible');
    }
    });
});