<button id="btn">open</button>
<div class="accordion">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
.accordion {
  width: 100px;
  height: 50px;
  overflow: hidden;
  word-break: break-all;
  transition: 1s;
  border: 1px solid #000;
  
  &.-open {
    height: auto;
  }
}
View Compiled
const btn = document.getElementById("btn");
const accordion = document.querySelector(".accordion");

function onClick() {
  const hasOpen = accordion.classList.contains("-open");
  
  if (hasOpen) {
    accordion.classList.remove("-open")  
    return;
  }
  
  accordion.classList.add("-open")
}

btn.addEventListener("click", onClick);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.