<button>Collapse</button>

<div class="content">
  <p class="collapsible">
This is a block of text that is collapsed by max-height. It is a simple approach, but less performant than using transform. The transition timings are <b>very</b> inaccurate. This can be offset by using a max-height closer to the actual height, but if we knew our element height we wouldn't be in this mess...
</p>
  <p>
Praesent nec feugiat enim. In vitae elementum erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lectus varius ipsum tempor maximus in ac eros. Mauris lacus lorem, elementum non lacus vitae, interdum commodo odio.
    </p>
</div>

.collapsible {
  transition: max-height 1s ease-in-out;
  overflow: hidden;
  max-height: 1000px;
}
.collapsed {
  max-height: 0;
}

document.querySelector('button').addEventListener('click', () => { document.querySelector('.collapsible').classList.toggle('collapsed');});