Expand/Collapse Widget Demo

This is the first example of an expand/collapse widget. Click the title above to expand or collapse this content. The transition is smooth and the content is hidden by default.

You can put any content here, including text, images, lists, or even other interactive elements.

• Item 1
• Item 2
• Item 3

This second example demonstrates how the widget can handle longer content. The maximum height is set to 500px when expanded, but you can adjust this value based on your needs.

The widget uses CSS transitions for smooth expand/collapse animations. The JavaScript function toggles a class that controls the visibility and height of the content area.

Key features:

1. Smooth CSS transitions
2. Accessible keyboard navigation
3. Customizable styling
4. Multiple instances on the same page

This example shows how the widget can be used for FAQ sections or accordion-style content layouts. Each question-answer pair can be its own widget.

Question: How does the expand/collapse functionality work?

The widget uses a combination of CSS max-height property and JavaScript to toggle between expanded and collapsed states. When collapsed, max-height is 0, and when expanded, it transitions to a larger value.

Question: Is this accessible?

Yes, the widget can be made fully accessible by adding proper ARIA attributes and keyboard event handlers. The current implementation uses onclick events, but you can enhance it with keyboard support.