Simple overlapping Display Toggle

by Simon Harte

HTML

<div class="wrapper">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium id quidem dolore nemo ullam, fuga quos quas! Doloremque vitae tenetur quaerat pariatur assumenda, quae laudantium! Omnis dolor vel facilis amet?
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique harum tenetur quisquam eligendi porro quod deleniti consequuntur adipisci, sit qui aliquid esse nemo, natus non suscipit excepturi impedit dolorum necessitatibus.
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.wrapper {
  background: chocolate;
  color: beige;
  padding: 20px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  &.open {
    .container {
      top: 0;
    }
  }
}

.container {
  background: beige;
  color: black;
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding: inherit;
  transition: top .5s;
}

JavaScript

$('.wrapper').on('click', (ev) => {
  $(ev.currentTarget).toggleClass('open');
});