Three approaches: native details/summary, a JS-powered toggle, and an accordion. Each widget is wrapped in an element with class "example", and the container for the controlled content has class "details".
This uses the built-in HTML details and summary elements. It's accessible, keyboard-friendly, and doesn’t require JavaScript.
Tip: Use this when you want the simplest solution.
This panel is controlled via a button using aria-expanded and aria-controls. It’s flexible and works anywhere you need custom behavior.
This pattern is useful when you need to control multiple panels or coordinate with other UI states.
Only one accordion section opens at a time. Opening A closes B and C automatically.
Section B content goes here. You can include any markup, lists, and even images.
Section C wraps up the examples. Try toggling quickly to see the smooth transitions.
This accordion ensures only one panel is open at a time for a compact layout.