Expand/Collapse Widgets

Examples of native and scripted expand/collapse. Each widget is wrapped in an element with the "example" class and uses a content container with the "details" class.

Native details/summary

Account settings Profile, security, notifications

Manage how your account behaves across the app. These options are powered by the built-in HTML details/summary elements.

  • Update display name and avatar
  • Change password and 2FA settings
  • Choose notification preferences

Button-controlled panel

FAQ item (Accordion group)

What is an accordion? Expandable sections with only one open at a time

An accordion is a set of vertically stacked items that expand to reveal content. When one item is opened, others close.

FAQ item (Accordion group)

Can I open multiple items? This group allows only one

In this demo, opening one FAQ item closes the others in the same group for a cleaner experience.

FAQ item (Accordion group)

Is native details accessible? Yes, with a proper summary

Native <details> and <summary> provide built-in semantics. Styling enhances the presentation.

Tip: Press Ctrl+F (or Cmd+F on macOS) while focused on the page to toggle the filter panel in the second widget.