Tab snippet test

by roy barak

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="cont">
  <div class="left">

  </div>
  <div class="results_toggle">

  </div>
  <div class="right">

  </div>
</div>

CSS

.cont {
  width: 100vw;
}

.left {
  position: relative;
  width: 50vw;
  height: 100vh;
  background-color: grey;
  float: left;
  border-left:2px solid white;
}

.right {
  height: 100vh;
  width: 50vw;
  float: left;
}

.results_toggle:before {
      content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: black;
    font-size: 24px;
    padding-right: 0.5em;
    position: absolute;
    top: 14px;
    left: 5px;
}

.results_toggle {
      background-color: grey;
    height: 60px;
    width: 30px;
    position: absolute;
    z-index: 106;
    top: 45vh;
    right: 223px;
    border-bottom-right-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0;
}

.left_hide{
  left:0px;
}

JavaScript

$('.results_toggle').on('click', function() {

  $(this).toggleClass('left_hide');
  $('.left').toggle();

});