Examples using native HTML details and custom JavaScript-driven toggles. Each widget is wrapped with an element that has class "example", and the container for controlled content uses class "details".
An expand/collapse widget is a UI control that reveals additional content on demand. The native HTML <details> element provides built-in accessibility and keyboard interaction.
This custom widget uses a button with aria-expanded and aria-controls to link the control to the collapsible content container.
JavaScript toggles the hidden state and updates aria-expanded accordingly.
details.<details>.This section explains the purpose of an accordion: it helps organize large amounts of content by revealing one section at a time.
Clicking a section header will open that section and close others. The controlled content container uses the class details.
aria-expanded.div.details referenced via aria-controls.Ensure that:
aria-expanded accurately reflects the state.aria-controls.You can start a native <details> element in the open state using the open attribute. Click the summary to collapse it.
Tip: Try keyboard interaction. For custom widgets, the button toggles the hidden attribute on the associated .details container and updates aria-expanded.