JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div class="head">
</div>
<div class="foot">
</div>
<div class="toggle"></div>

CSS

.head,
.foot {
  position: fixed;
  width: 100%;
  z-index: 100;
  text-align: center;
  font-size: 18px;
  color: #000;
  background: #FFF;
  height: 100vh;
  width: 50vw;
}

.head {
  top:0;
  left: 0;
}

.foot {
  top:0;
  right: 0;
}

.toggle {
  position: fixed;
  top:0;
  right:auto;
  bottom:0;
  left:50%;
  margin:auto;
  z-index: 1001;
  cursor:pointer;
  border-left:1px dashed #CCC;
  height:100vh;
}

.toggle:before {
  content: '';
  position: absolute;
  top: 50vh;
  left: 0px;
  border-left: 40px dashed #CCC;
  border-top: 40px dashed transparent;
  border-bottom: 40px dashed transparent;
}

.toggle:after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50vh + 10px);
  border-left: 30px dashed rgba(255,255,255,1);
  border-top: 30px dashed transparent;
  border-bottom: 30px dashed transparent;
}

JavaScript

//Slide divs left/right

$(document).ready(function(){
  $(".toggle").click(function(){
      if($(".foot").css('right') == '0px'){
          $(".foot").animate({right:'-50vw'},2000);
      }
      else
      {
          $(".foot").animate({right:'0px'},2000);
      }
      if($(".head").css('left') == '0px'){
          $(".head").animate({left:'-50vw'},2000);
      }
      else
      {
          $(".head").animate({left:'0px'},2000);
      }
      $(".toggle").animate({height:'0px'},2000);  
  });
});