Expand/Collapse Widget Demo

Click the header to expand or collapse the content. This demonstrates an accessible, keyboard-friendly widget. Each widget is wrapped in a container with the class "example" and the expandable content uses a container with the class "details".

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This widget demonstrates a controlled content area that is revealed on demand. It is keyboard accessible and focuses management is preserved.

  • Click the header or press Enter/Space to toggle
  • Content is wrapped in a container with class "details"
  • Outer container carries class "example"

Using a consistent structure helps assistive technologies understand the relationship between the control and the content.

Tip: You can have multiple widgets on a single page, each with its own independent state.