Accordion
Collapsible sections built with native <details> elements.
Basic accordion
Section One
This section is open by default. The accordion uses native HTML <details> and <summary> elements — no JavaScript required for basic functionality.
Section Two
Each section can contain any HTML content. The chevron indicator rotates when the section is expanded.
Section Three
Sections are separated by borders automatically. The first and last items get rounded corners from the container.
All sections closed
First item
Content for the first item.
Second item
Content for the second item.
Third item
Content for the third item.
Rich content
With nested elements
Accordions can contain any HTML:
- Unordered lists
- Paragraphs and inline formatting
- Any block-level content
With a table
| Name | Value |
|---|---|
| Alpha | 100 |
| Beta | 200 |