<div class="spoiler">
  <div class="spoiler-title">Toggle spoiler</div>
  <div class="spoiler-body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam repellendus voluptates, sit temporibus natus saepe doloremque facere. Asperiores ullam tempore id quibusdam distinctio, quod dolore perferendis saepe maiores nemo sapiente!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam repellendus voluptates, sit temporibus natus saepe doloremque facere. Asperiores ullam tempore id quibusdam distinctio, quod dolore perferendis saepe maiores nemo sapiente!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam repellendus voluptates, sit temporibus natus saepe doloremque facere. Asperiores ullam tempore id quibusdam distinctio, quod dolore perferendis <span style="color:red">saepe maiores nemo sapiente!</span>
  </div>
</div>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam repellendus voluptates, sit temporibus natus saepe doloremque facere. Asperiores ullam tempore id quibusdam distinctio, quod dolore perferendis saepe maiores nemo sapiente!</p>

body {
  padding: 1rem;
}

.spoiler-title {
  font-size: 1.5em;
}

.spoiler-body {
  transition: 1s ease;
  transition-property: opacity, max-height;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
}

.spoiler:hover .spoiler-body {
  opacity: 1;
  max-height: calc(var(--max-height, 100vh) + 1em);
}

function prepareAnimation() {
  document.querySelectorAll(".spoiler").forEach((el) => {
    const body = el.querySelector(".spoiler-body");
    body.style.setProperty("--max-height", body.scrollHeight + "px");
  });
}

window.addEventListener("resize", prepareAnimation);
prepareAnimation();