Three examples below show different ways to create expand/collapse behavior. Each widget is wrapped with div.example, and the container for the controlled content uses the details class.
Example 1: Native HTML details/summary
This uses the built-in HTML <details> element for accessible expand/collapse. No JavaScript is required.
details.details.Tip: You can nest content, include images, or any markup within a details element.
Example 2: Button-controlled content
This section is hidden or shown by JavaScript toggling the hidden attribute on the div.details container.
Example 3: Accordion (only one section open)
The accordion ensures only one section is open at a time. Clicking another header closes the currently open section.
Q: Can multiple sections be open?
A: Not in this accordion; activating one will close others automatically.