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="wiide nill">

  <div id="lin" class="yell col-xs-12">
    <span class="col-xs-12 nill">
    <h1>
    Aenean tempor
    </h1>
Aenean tempor nibh eu urna blandit, quis feugiat sapien scelerisque. Aenean sed bibendum orci. Donec pellentesque</span>
    <button class="col-xs-12 left-btn btn btn-primary">
    Edit
    </button>
  </div>
  
<div id="rin" class="abso red col-xs-12">

<span class="col-xs-12 nill">
    <h1>
    Aenean tempor
    </h1>
Aenean tempor nibh eu urna blandit, quis feugiat sapien scelerisque. Aenean sed bibendum orci. Donec pellentesque</span>
    <button class="col-xs-12 right-btn btn btn-primary">
    Back
    </button>
  </div>
 
</div>-->

<!-- ---------------------------- -->

<!--<div class="col-xs-12 nill">-->

<div class="modhidden col-xs-12">Here I am !
  
  <a href="#" class="modslide col-xs-12 left-btn btn btn-primary">Update</a>
  
</div>

<div class="modhidden2 col-xs-12">Here I am AGAIN!
  
  <a href="#" class="modslide2 col-xs-12 left-btn btn btn-primary">Update</a>
</div>
    
  <div class="modleft col-xs-12">
  
    <h1>
    Aenean tempor
  </h1>
  Left panel
    <a href="#" class="modslide">Show ONE</a>
    <a href="#" class="modslide2">The other ONE</a>
  </div>
  <div class="modclear"></div>
<!--</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"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });
    
    $('.modslide2').click(function(){
    var hidden2 = $('.modhidden2');
    if (hidden2.hasClass('visible')){
        hidden2.animate({"right":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden2.animate({"right":"0px"}, "slow").addClass('visible');
    }
    });
});