This page demonstrates multiple expand/collapse widgets. Each widget is wrapped in a container with the class "example". The content container that is shown/hidden uses the class "details".
This is a native HTML expand/collapse widget using the details and summary elements. The container for the controlled content is the details element and it has the class "details".
This is a custom expand/collapse widget implemented with a button and a panel. The panel acts as the container for controlled content and uses the class "details".
Accessibility is improved with ARIA attributes: aria-expanded on the button and aria-controls pointing to the panel.
This is another native details/summary widget. The content container remains the details element itself, which carries the "details" class.