JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="container">
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium fermentum laoreet. Etiam condimentum eros at magna maximus aliquam. Nulla quis bibendum nisl. Nam eget sem efficitur, dignissim arcu et, rutrum tellus. Quisque vitae metus a augue pellentesque ullamcorper. Quisque interdum purus elit, ultrices rutrum quam cursus scelerisque. Duis viverra ex sed quam iaculis, ac fermentum sapien iaculis. Phasellus interdum odio sed lacus ultrices euismod vel sed felis. Vestibulum auctor, tortor et malesuada varius, eros elit ultrices sapien, eget lacinia felis purus non purus. Etiam sit amet malesuada erat. Suspendisse arcu leo, pellentesque dignissim lacinia quis, hendrerit vel tellus. Phasellus nec ex eget enim ornare congue eget ac nulla. Donec egestas risus sit amet sem mattis tincidunt. Nam lacinia dui vitae congue pulvinar.

<p>Quisque interdum lorem sed lectus fringilla, sed varius massa vulputate. Aliquam congue suscipit mollis. Mauris lobortis placerat iaculis. Maecenas a lectus malesuada neque vestibulum aliquam et sit amet tortor. Sed id porttitor ex. Nam cursus vehicula dui, in euismod nisi rutrum non. Nullam maximus porta ultrices. Pellentesque et pharetra risus, sagittis rutrum ante. Integer eleifend mattis quam. In consectetur mi ac lacus condimentum, vitae suscipit diam molestie. Mauris in sodales ante.

<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed euismod justo eget orci auctor porta eget at massa. Integer ipsum velit, tempor vitae lacus ac, iaculis convallis eros. Fusce eu lacus pulvinar, tincidunt sapien sit amet, vehicula est. Donec et urna ac metus aliquam iaculis. Nulla gravida lacinia nulla, id dapibus diam tincidunt ut. Duis non dolor vitae diam lacinia laoreet eget et sem. Donec sapien tellus, consectetur eget ornare nec, pretium at lectus. Morbi non ex elementum, venenatis nulla et, condimentum lacus. Mauris dignissim enim sit amet ex bibendum dapibus. Nulla facilisi....

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#unshiftButton {
  display: none;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}

#content {
  overflow: scroll;
}

JavaScript

var shiftButton = document.getElementById('shiftButton');
var unshiftButton = document.getElementById('unshiftButton');
var content = document.getElementById('content');

function shiftContent() {
	content.style.height = '50%';
  shiftButton.style.display = 'none';
  unshiftButton.style.display = 'inline';
}

function unshiftContent() {
	content.style.height = 'auto';
  shiftButton.style.display = 'inline';
  unshiftButton.style.display = 'none';
}

shiftButton.addEventListener('click', shiftContent);
unshiftButton.addEventListener('click', unshiftContent);