Expand / Collapse Widget Demo

Each widget is wrapped in a container with the class "example". The content container uses the class "details".

First widget: Introduction

This is an example of a simple expand/collapse widget built with the native details/summary elements. Click the header to reveal more content.

Use the controls above to expand or collapse all widgets at once.

Tip The arrow indicator is customizable by CSS, including rotation when opened.

Second widget: Features
  • Accessible using native HTML semantics
  • Keyboard operable with Tab and Enter/Space
  • Easy to style with CSS

Content behind the header can include images, lists, or any HTML content.

Third widget: More information

Details elements can be nested, which allows for complex expand/collapse UIs without extra JavaScript.

Try opening multiple sections independently.