<button id="toggle">toggle</button>

<div>Something before 🙃</div>

<div class="expander" id="expander">
  <div class="expander-content">
    This content should…<br />
    toggle! 👻
  </div>
</div>

<div>Something after 🙂</div>
.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 1s;
}
.expander-content {
  min-height: 0;
  transition: visibility 1s;
  visibility: hidden;
}
.expander.expanded {
  grid-template-rows: 1fr;
}
.expander.expanded .expander-content {
  visibility: visible;
}
View Compiled 
toggle.onclick = () => {
  expander.classList.toggle("expanded");
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.