Slide in test

by Tom M

HTML

<div id='outer-container'>
  <div id='text-container'>
  <p>Originally from North Wales, I moved to London in 2009 and embarked upon a degree at Goldsmiths and gaining a BA in Design, after completion and never really finding my speciality I began working in pubs & bars in South London and really enjoying the real community I was meeting outside the university bubble. Looking to add a more professional string to this bow, I have wound up on the path of cost-controlling at a large hotel in East London, something which is heavy on data-input and reconciliation and in my mind, number one on the list to become automated by a web application in the near future!</p>
  </div>
  <div id='link-container' class='slidein-container return'>
                <a href="https://github.com/tomdmitchell">Github</a>
                <a href="https://www.codewars.com/users/tomdmitchell">Codewars</a>
                <a href="https://www.freecodecamp.org/tomdmitchell">FCC</a>
                <a href="https://jsfiddle.net/tdmitchell/k4mqdL6b/10/">Carousel</a>
  </div>
</div>
<button>Slide me!</button>

CSS

#outer-container {
  width: 40%;
  position: relative;
  top: 40%;
}

#text-container {
  width: 100%;
  display: block;
  height: auto;    
}

.slidein-container {
  width: 0;
  position: absolute;
  left: 100%;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: white;
  overflow: hidden;
}

.active {
  width: 100%;
left: 0%;
transition: 2s linear;
}

.return {
  left: 100%;
  transition: 2s linear;
}

#link-container {
  
}

#link-container a {
  display: block;
  padding: 1em 0;
}

#link-container a:hover {
	background-color: lightgrey;
}

JavaScript

let slideContainer = document.querySelector('.slidein-container');

document.querySelector('button').
addEventListener('click', function(e) {
  if (e.target) {
    slideContainer.classList.toggle('active');
    slideContainer.classList.toggle('return');
  }
})