Expand/Collapse Widget Demo

First Example: Basic Information

This is the first expand/collapse widget. It demonstrates a simple accordion-style interaction where clicking the header expands or collapses the content below. The content is hidden by default and reveals additional information when expanded.

Item 1: Some detailed information here.
Item 2: More details that were previously hidden.
Item 3: Additional content for demonstration purposes.

Second Example: Advanced Features

This second widget shows more advanced content. It can include tables, forms, or any other HTML elements. The smooth transition effect makes the user experience more polished.

Feature	Description
Smooth Animation	CSS transitions for height changes.
Custom Icons	Plus/minus symbols for expand/collapse state.
Accessibility	Keyboard navigation support via onclick.

Third Example: Long Content

This example contains longer content to demonstrate how the widget handles more extensive text. 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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.