<div>
  <span>Accordion</span>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
  </ul>
</div>
body {
  interpolate-size: allow-keywords;
}

div {
  height: 2.5rem;
  padding: 1rem;
  overflow: hidden;
  transition: height ease 1s;
  border: 1px solid black;
  background: linear-gradient(#e66465, #9198e5);
}

span {
  font-size: 2rem;
}

div:hover {
  height: auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.