JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>
  <section>
    CONTENT
    <div class="hidden">
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
      MORE CONTENT<br>
    </div>
  </section>
  <div>
    <button>toggle content</button>
  </div>
</content>
<footer class="mt-auto">FOOTER</footer>
</body>

CSS

body {
  text-align: center;
}

footer {
  background: yellow;
  height: 100px;
}


.hidden {
  display: none;
}

JavaScript

$("button").click(function() {
	$("section div").toggleClass("hidden");
});