Expand/Collapse Widget Examples

Below are two common approaches for expand/collapse interactions. Each widget is wrapped in a container with the class "example". The container for the content that is shown/hidden uses the class "details".

Native HTML Details

Project Overview

This uses the native HTML <details> element. Click the summary to toggle the content.

Highlights

  • Built-in keyboard and accessibility support
  • No JavaScript required
  • Works across modern browsers

Tip: You can nest content like lists, images, or additional paragraphs inside the details panel.

Button-Controlled Panel