Below are two variations of accessible expand/collapse patterns. The first uses the native
<details> element, while the second demonstrates a custom toggle button that controls a collapsible region.
The native <details> element is a semantic way to reveal supporting information without extra JavaScript.
Use it for lightweight disclosure widgets.
This pattern separates the control (button) from the controlled content, gives them explicit relationships with
aria-expanded and aria-controls, and uses JavaScript to manage visibility.
Great for dashboards and custom components where you need full styling control.
Maintain focus states, announce changes via ARIA, and keep hidden content out of tab order.
Toggle the hidden attribute and sync aria-expanded to the button state.