Tab snippet test

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="right">
    <div class="results_toggle"></div>    
  </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;
  position: relative;
}

.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;
  left: 0;
  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();
});