Box moves into the view from the right

by Marius Jopen

HTML

<div class="wrapper pushed">

  <div class="col red">
    <p class="title">VALERIA NAPOLEONE XX</p>
    <div class="content">
AAAAA
     
    </div>
  </div>

  <div id="toggleDiv" class="col blue">
    <p class="title">VALERIA NAPOLEONE</p>
    <div class="content">

BBBBB
    </div>
  </div>
  
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  color: white;
}

.wrapper {
  display: block;
  position: relative;
  height: 100%;
}

.col {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: left 1s ease;
}

.red {
  background-color: red;
}

.content {
  overflow-x: hidden;
  height: 100%;
  margin-top: 50px;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
}


.blue {
  background-color: blue;
  left: 0px;
}
.pushed .blue {
  left: 100%;
}

JavaScript

$('.title').click(function slider(){
		$('.wrapper').toggleClass('pushed')
})