Transitions an element's height

Hello Guuys!

To 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>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector('.el');
let height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');

If you find It useful don't forget to Like and Follow for more.