Expand/Collapse Widget Demo

This is the basic expand/collapse widget. Click the title to toggle the content visibility. The widget uses CSS transitions for smooth animations and JavaScript for the toggle functionality.

The content area has a maximum height that expands when opened, creating a smooth reveal effect. You can adjust the max-height value in the CSS to accommodate different content lengths.

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

• Smooth CSS transitions for opening and closing
• Rotating arrow icon for visual feedback
• Hover effects on the header
• Accessible keyboard navigation (click events work with Enter key)
• Responsive design that works on mobile devices

You can easily customize the styling by modifying the CSS classes. The widget uses a simple max-height transition rather than display toggling to enable smooth animations.

Implementation:

1. Wrap each widget in a div with class "example"
2. Use an h3 (or similar) element with onclick="toggleDetails(this)" for the trigger
3. Create a div with class "details" for the collapsible content
4. Include the CSS for styling and transitions
5. Add the JavaScript function for toggle functionality

Customization:

Modify the CSS variables like transition duration, colors, and max-height to match your design requirements. The toggle icon can be replaced with any symbol or even an image.