Expand/Collapse Widgets

This is the content for Section 1. It provides additional information that is hidden by default to keep the page clean and concise.

Users can click the button above to reveal or hide this content. This can be useful for FAQs, detailed descriptions, or optional information.

• Feature one: Easy to use
• Feature two: Highly customizable
• Feature three: Works with pure JavaScript and CSS

This is the content for Section 2. It contains a different set of information. Notice how the transition makes the expansion and collapse smooth.

The widget is designed to be reusable; each .example div with its corresponding .toggle-button and .details div will function independently without interfering with others.

Even images and other complex HTML structures can be included within the collapsible area.

This section has less content, demonstrating that the collapse works correctly even with minimal text.