Expand/Collapse Widget Demo

This is a basic expand/collapse widget. Click the header to toggle the content visibility. The transition provides a smooth animation effect.

You can use this pattern for FAQs, accordions, or any collapsible content sections on your website.

This example demonstrates how the widget handles longer content. The smooth transition works well with varying content lengths.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Item 1: First list item
• Item 2: Second list item
• Item 3: Third list item

You can have multiple expand/collapse widgets on the same page. Each one operates independently.

This is useful for creating accordion-style interfaces where only one section might be expanded at a time, or multiple sections can be open simultaneously depending on your implementation.

The CSS transitions ensure smooth opening and closing animations for better user experience.