Expand/Collapse Widget Demo

This is a basic expand/collapse widget that demonstrates simple content hiding and showing functionality. Click the header to toggle the visibility of this content.

The widget uses CSS transitions for smooth animations and JavaScript to handle the toggle behavior.

This widget supports multiple instances on the same page. Each example is independent and maintains its own state.

Features include:

• Smooth CSS transitions for expand/collapse animations
• Visual feedback with hover effects
• Rotating toggle icon for better UX
• Accessible keyboard navigation
• Multiple widgets working independently

To implement this widget:

1. Wrap your content in a div with the "example" class
2. Create a clickable header element
3. Add a div with the "details" class for collapsible content
4. Include the provided CSS and JavaScript
5. Ensure each widget has the onclick handler

The JavaScript function automatically handles the expand/collapse logic for any element with the appropriate structure.