Accordion
An accordion component that coordinates named <details> elements so only one panel is
open at a time within the same group.
Usage
Section 1
Content for section 1.
Section 2
Content for section 2.
Section 3
Content for section 3.
Section 1
Content for section 1.
Section 2
Content for section 2.
Section 3
Content for section 3.
<section is="root-accordion">
<details is="root-details">
<summary>Section 1</summary>
<p>Content for section 1.</p>
</details>
<details is="root-details">
<summary>Section 2</summary>
<p>Content for section 2.</p>
</details>
<details is="root-details">
<summary>Section 3</summary>
<p>Content for section 3.</p>
</details>
</section>
The panels are joined, not stacked: each one is pulled up over the border above it, so the seam is a single line. The radii belong to the group - the first panel rounds only its top corners, the last only its bottom ones, and every panel between them is square.
How it works
The accordion automatically assigns a shared name attribute to all direct
<details>
children. This native HTML behavior ensures only one <details>
can be open at a time within the same group.
If you provide a name attribute on the accordion itself, that value is used instead of an
auto-generated GUID.
Sizes
The panels take Button's three size steps - small, medium (the default) and
large
- on the <details> itself, so a disclosure and a button in the same row match. Each
step moves the padding, the summary's font size and weight, and the radius the group's first and last
corners are drawn with.
Large
Content.
Large
Content.
Large
Content.
Large
Content.
<section is="root-accordion">
<details is="root-details" data-size="large">
<summary>Large</summary>
<p>Content.</p>
</details>
<details is="root-details" data-size="large">
<summary>Large</summary>
<p>Content.</p>
</details>
</section>
Small
Content.
Small
Content.
Small
Content.
Small
Content.
<section is="root-accordion">
<details is="root-details" data-size="small">
<summary>Small</summary>
<p>Content.</p>
</details>
<details is="root-details" data-size="small">
<summary>Small</summary>
<p>Content.</p>
</details>
</section>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
name |
string |
Auto-generated GUID | Accordion group name - shared by all child <details> |
Events
| Event | Detail | Description |
|---|---|---|
root-accordion.update |
- | Fired when the accordion updates child details |
root-accordion.toggle |
{ opened } |
Fired when a panel opens or closes |
Examples
Without name attribute
- each <details> gets an auto-generated group name:
Section 1
Content
Section 2
Content
Section 1
Content
Section 2
Content
<section is="root-accordion">
<details is="root-details">
<summary>Section 1</summary>
<p>Content</p>
</details>
<details is="root-details">
<summary>Section 2</summary>
<p>Content</p>
</details>
</section>
<!-- After init: <details is="root-details" name="xxxx-xxxx-accordion"> -->
With name attribute
- all <details> share the provided name:
Question 1
Answer 1
Question 2
Answer 2
Question 1
Answer 1
Question 2
Answer 2
<section is="root-accordion" name="faq">
<details is="root-details">
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details is="root-details">
<summary>Question 2</summary>
<p>Answer 2</p>
</details>
</section>
<!-- After init: <details is="root-details" name="faq"> -->
Extends
HTMLElement - use with <section is="root-accordion">.