JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<script src="http://zachsaucier.com/jquery.velocity.min.js"></script>
<section>
  <div class="button-w">
    <button>Toggle</button>
  </div>

  <div class="box">
    <p class="innerbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias libero quia soluta iure obcaecati maiores laudantium saepe ullam ex asperiores tempore ab. Nulla qui vitae at rerum dolore tempora ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis a aliquam esse quidem totam dolore fuga sed nostrum quisquam praesentium sapiente iure illum similique sint culpa quasi repellat blanditiis dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae cumque inventore saepe commodi fugiat ad odio rerum dolorem molestias dolore pariatur perspiciatis ab laborum repellendus aliquid illo consequatur sequi sapiente iure illum similique sint culpa quasi repellat blanditiis dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae cumque inventore saepe commodi fugiat ad odio rerum dolorem molestias dolore pariatur perspiciatis ab laborum repellendus aliquid illo consequatur sequi sapiente iure illum similique sint culpa quasi repellat blanditiis dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae cumque inventore saepe commodi fugiat ad odio rerum dolorem molestias dolore pariatur perspiciatis ab laborum repellendus aliquid illo consequatur sequi.</p>

    <div class="button-w">
      <button>Close</button>
    </div>

  </div>
</section>


<section>
  <div class="button-w">
    <button>Toggle</button>
  </div>

  <div class="box">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias libero quia soluta iure obcaecati maiores laudantium saepe ullam ex asperiores tempore ab. Nulla qui vitae at rerum dolore tempora ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis a aliquam esse quidem totam dolore fuga sed nostrum quisquam praesentium sapiente iure illum similique sint culpa...

CSS

.button-w {
  width: 100%;
  float: left;
}

.box {
  width: 100%;
  border: 1px solid lime;
  overflow: hidden;
  color: black;
}
.box .innerbox {
    margin:0;
}

JavaScript

var boxx = $('.innerbox'),
    count = 0;

$('button').on('click', function() {
    if(++count % 2 == 1) {
        boxx.velocity({ marginTop: "-100%" }, { duration:1000 });
    } else {
        boxx.velocity({ marginTop: "0%" }, { duration:1000 });
    }
});