Expand/Collapse Widget Demo

This is a basic expand/collapse widget that shows and hides content when the header is clicked. The transition is smooth and the icon rotates to indicate the state.

You can customize the max-height property in the CSS to accommodate different content sizes.

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

• Smooth CSS transitions for better user experience
• Rotating icon for visual feedback
• Accessible keyboard navigation (using Enter key)
• Responsive design that works on mobile devices

The JavaScript function handles the toggle logic and can be extended for more complex interactions.

How to Implement:

1. Wrap your content in a div with class "example"
2. Create a clickable header with class "toggle-header"
3. Place the controlled content in a div with class "details"
4. Add the onclick="toggleDetails(this)" to the header
5. Include the CSS for styling and transitions
6. Include the JavaScript function

Customization Options:

• Change the max-height value for different content sizes
• Modify transition duration and easing
• Adjust colors and spacing to match your design
• Add ARIA attributes for better accessibility