Expand/Collapse Widget Demo

This is the basic expand/collapse widget. Click the header to toggle the content visibility. The animation provides smooth transitions between expanded and collapsed states.

  • Uses CSS transitions for smooth animation
  • Accessible with keyboard navigation
  • Includes visual feedback with rotating icon

Technical Details

This widget demonstrates more advanced functionality including:

Feature Description
ARIA Attributes Proper accessibility support
Keyboard Navigation Supports Enter and Space keys
Smooth Animation 300ms CSS transition

The max-height property creates the expand/collapse effect while maintaining smooth performance.

Usage Instructions

How to Use

  1. Click the header to expand or collapse the content
  2. Press Enter or Space when focused on the header for keyboard users
  3. The .expanded class is automatically added/removed
  4. Customize the max-height value in CSS for different content sizes

Customization Options

  • Change transition duration in CSS
  • Modify colors and styling
  • Adjust max-height for different content lengths
  • Add multiple levels of nesting

This widget is fully responsive and works well on both desktop and mobile devices.