This is a basic example of an expand/collapse widget. The button controls the visibility of this content. State is exposed via aria-expanded on the button and aria-hidden on this region.
When opened, the script measures the natural height of this block and animates max-height so the transition is smooth regardless of content size.
Try adding more text here or resizing your window; the animation adapts.
This parent panel contains another expand/collapse widget inside.
The child panel opens and closes independently from the parent.
This example remembers whether you last left the panel open or closed. The key used is expand.persist.details-persist.
Open the panel, reload the page, and it will restore its state.