Expand/Collapse Widget Demo

This is a basic expand/collapse widget. Click the header to show or hide this content. The widget uses CSS transitions for smooth animations and JavaScript to handle the toggle functionality.

The content area has a maximum height that expands when active, creating a smooth reveal effect.

This widget is fully accessible and works with keyboard navigation. The expand/collapse behavior is controlled by adding/removing the 'expanded' class to the details container.

You can customize the animation duration, max-height, and styling to match your design requirements.

• Smooth CSS transitions
• Click to toggle
• Visual feedback with rotating icon
• Responsive design

To implement this widget:

1. Wrap content in a div with class 'example'
2. Create a clickable header with onclick="toggleDetails(this)"
3. Add a details div with class 'details' for controlled content
4. Include the provided CSS and JavaScript

The JavaScript function handles the toggle logic, and CSS provides the smooth animation effects.