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;
  display: none;
  left: 0;
  background: #f90;
  color: #000;
}

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

.modclear {
  clear: both;
}

.visible {
  display: block;
}

JavaScript

$(document).ready(function() {
  $('.modslide').click(function() {
    $('.modhidden').toggleClass('visible');
  });
  $('.modslide2').click(function() {
    $('.modhidden2').toggleClass('visible');
  });
});