JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id='one'></div>
<div id='two'>

  <p>
    test
  </p>
  <p>
    <a href="#" class='toggle'>Toggle</a>
  </p>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#one,
#two {
  position: absolute;
}

#one {
  top: 0px;
  width: 200px;
  bottom: 0px;
  background-color: lime;
}

#two {
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  background-color: pink;
}

#toggle {
  position: relative;
}

JavaScript

$('.toggle').click(function() {

  if ($('#one').width()) {
    $('#one').animate({
      width: 0,
    });
    $('#two').animate({
      left: 0,
    });
  } else {
    $('#one').animate({
      width: 200,
    });
    $('#two').animate({
      left: 200
    });
  }
});