This is the content for Widget One. It demonstrates how an element can expand and collapse to reveal or hide additional information. You can put any HTML content in here, like text, images, or even other interactive elements.
The transition is handled by CSS using `max-height` for a smooth animation effect. The JavaScript toggles a class on the parent `div.example` to control its state.
Here's some more information for Widget Two. This could be a FAQ answer, a product description, or a detailed explanation of a feature. The expand/collapse pattern is useful for organizing large amounts of content into digestible chunks.
Each widget is independent and can be expanded or collapsed without affecting others.
This is the final example content. It shows that the structure is reusable. The JavaScript targets all elements with the `toggle` class and applies the necessary functionality.
Accessibility attributes like `aria-expanded` and `aria-controls` are also updated to improve the user experience for assistive technologies.