This is the content for Section 1. It contains some detailed information that is initially hidden and only becomes visible when the user clicks the button above.
You can put any HTML content here, such as paragraphs, images, or even other widgets.
This is the content for Section 2. It demonstrates that each widget operates independently. You can expand one while the other remains collapsed, or expand both.
The `details` class styles the controlled content, and the `example` class wraps the entire widget for a consistent presentation.
This is a third example to show the reusability of the component. Each `toggle-button` controls its immediately following sibling with the `details` class.
The JavaScript iterates through all elements with the `toggle-button` class and attaches an event listener to each one.