Height Animation
A wrapper that animates its height when it expands, collapses, or when its content changes size while expanded.
Expand and Collapse
The content is measured in the browser, so you never have to guess a height. It stays mounted while collapsed — only
hidden, inert and aria-hidden — so a typed draft is still there when it reopens. Put aria-expanded on the control that toggles it; the wrapper does not set it.Content Size Changes
While expanded, a
ResizeObserver watches the content. Anything that changes its size by more than half a pixel — text added, an image finishing loading — animates to the new height and then returns to auto.Without Animation
Enabled="false" keeps the mounted-while-collapsed behaviour but applies height changes immediately. Useful for dense UI where the movement is more distracting than helpful, or when you want the animation to follow a user setting.