<button>Mostrar</button>

<section>
  <h2>Título</h2>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque risus eu tempor cursus. Curabitur eleifend turpis eget rutrum interdum. Fusce porttitor ex massa, vel eleifend nisl ornare non. Maecenas luctus erat nulla. Phasellus gravida accumsan odio, id sagittis quam ultricies sed. Duis volutpat turpis nibh. Etiam ornare eros eu mollis faucibus.
  </div>
</section>

section .content {
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}

const
  button = document.querySelector("button"),
  content = document.querySelector(".content");

button.addEventListener("click", () => {
  if (content.style.height === "0px" || !content.style.height) {
    content.style.height = "auto"; // Atribui height: auto ao elemento

    const rect = content.getBoundingClientRect(); // Calcula suas dimensões

    content.style.height = "0px"; // Rapidamente atribui height: 0px novamente, para iniciar a animação

    getComputedStyle(content).height; // Truque para que a animação funcione

    content.style.height = `${rect.height}px`; // Faz a transição para a altura calculada
  } else content.style.height = "0px";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.