<button>Collapse</button>

<div class="content">
  <p class="collapsible">
This is a block of text that is collapsed by scale. It is performant, but unfortunately, it warps the contents when it opens and closes, and leaves a gap in its place.
</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: transform 0.5s ease-out;
  transform-origin: top left;
}
.collapsed {
  transform: scaleY(0);
}

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