Expand and collapse

Expand or collapse the space occupied by optional content.

Live preview Try the effect

MOTION PREVIEW

Member permissions and notifications

240ms · ease-out

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Expand or collapse the space occupied by optional content. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Settings groups and disclosure panels.

Related concepts

Collapsing changes layout space; hiding with opacity alone leaves the space occupied.

Describe this effect

Output language

Animate the section height when opening or closing and keep the toggle accessible by keyboard. Use a 240ms ease-out transition. Show the final state immediately when reduced motion is requested.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.