Expand/Collapse Widget Demo

Example 1: Native HTML Details Element

Click to expand information

This uses the native HTML <details> and <summary> elements. It provides semantic meaning and built-in keyboard support.

Key features:

  • No JavaScript required
  • Accessible by default
  • Works with screen readers
  • Keyboard navigable

Native HTML implementation - Press Space or Enter to toggle.

Example 2: Custom Button Implementation

This widget uses a custom button with ARIA attributes to manage state.

Features:

  • aria-expanded indicates open/closed state
  • aria-controls links button to content
  • Full keyboard support (Enter, Space)
  • Smooth animations
  • Semantic button element

Custom button with ARIA - Press Space or Enter to toggle, Tab to focus.

Example 3: Multiple Independent Widgets

Each widget operates independently. Expanding one does not affect the others.

All widgets share the same styling and behavior patterns.

Users can expand or collapse any section at their own pace.

Multiple toggle buttons - Each can be controlled independently.