Transition to `height: auto` & `display: none` Using Pure CSS
Briefly

CSS Transitions simplify web interactions; you just need an element in two states with the transition property, enabling smooth animations between them.
The challenging part when using CSS Transitions involves intrinsic sizes like 'auto' and triggering transitions on first style updates, requiring new CSS features.
To create an expanding disclosure widget that grows from height: 0 to height: auto, transitions need to manage intrinsic sizing properly for smooth animations.
CSS calc-size() function allows calculations on property values including auto, enabling successful transitions to and from intrinsic sizes when integrated correctly.
Read at CSS Weekly's Blog
[
|
]