Expand/Collapse Widget Demo

This is a basic expand/collapse widget. Click the title to toggle the content visibility. The animation provides smooth transitions for better user experience.

The content area has a maximum height that expands when opened, creating a nice sliding effect.

Features:

• Smooth CSS transitions for expand/collapse animation
• Click-to-toggle functionality using JavaScript
• Visual feedback with hover effects
• Rotating arrow icon to indicate state
• Accessible design with proper focus handling

This widget is commonly used in FAQs, accordions, and collapsible sections throughout web applications.

How to Implement:

1. Wrap your content in a div with class "example"
2. Create a clickable header with onclick="toggleDetails(this)"
3. Add a div with class "details" for the collapsible content
4. Include the CSS for smooth animations
5. Add the JavaScript function for toggle functionality

The widget automatically handles the expand/collapse behavior and provides visual feedback to users.