DEV Community

Said Mounaim
Said Mounaim

Posted on

Transitions an element's height 😍

Transitions an element's height from 0 to auto when its height is unknown.

  • Use transition to specify that changes to max-height should be transitioned over.
  • Use overflow: hidden to prevent the contents of the hidden element from overflowing its container.
  • Use max-height to specify an initial height of 0.
  • Use the :hover pseudo-class to change the max-height to the value of the --max-height variable set by JavaScript.
  • Use Element.scrollHeight and CSSStyleDeclaration.setProperty() to set the value of --max-height to the current height of the element.
<div class="trigger">
  Hover me
  <div class="el">Additional content</div>
Enter fullscreen mode Exit fullscreen mode
.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;

.trigger:hover > .el {
  max-height: var(--max-height);
Enter fullscreen mode Exit fullscreen mode
let el = document.querySelector('.el');
let height = el.scrollHeight;'--max-height', height + 'px');
Enter fullscreen mode Exit fullscreen mode

Top comments (0)