Expand/Collapse Widgets

This is an expand/collapse widget, also known as an accordion or disclosure widget. It allows you to hide and show content by clicking the toggle button.

The content below the button will smoothly expand and collapse with a nice animation. This is useful for organizing large amounts of information in a compact interface.

Key features of this implementation:

  • Smooth CSS transitions
  • Accessibility attributes (aria-expanded, aria-controls)
  • Keyboard accessible
  • Visual feedback on hover and click
  • Rotating icon indicator
  • Responsive design

Best practices for using expand/collapse widgets:

  • Keep headers concise and descriptive
  • Provide visual indicators of the expanded state
  • Use smooth animations for better UX
  • Ensure keyboard navigation support
  • Include proper ARIA labels for screen readers
  • Test on mobile devices