Accordion
Accordion patterns using accordion-wc with native details/summary. Progressive enhancement: works without JavaScript.
Overview
The accordion component uses the <accordion-wc> web component built on native HTML <details> and <summary> elements. This provides progressive enhancement: the accordion works without JavaScript, and JavaScript adds exclusive mode and keyboard navigation.
Key features:
- Progressive enhancement with native details/summary
- Exclusive mode (only one item open at a time)
- Keyboard navigation with arrow keys
- ARIA attributes for accessibility
- Smooth open/close animations
Basic Accordion
A simple accordion with multiple expandable sections. Multiple sections can be open simultaneously.
<accordion-wc> <details open> <summary>Section One</summary> <div> <p>Content for the first section.</p> </div> </details> <details> <summary>Section Two</summary> <div> <p>Content for the second section.</p> </div> </details> <details> <summary>Section Three</summary> <div> <p>Content for the third section.</p> </div> </details></accordion-wc>Exclusive Mode
Add data-exclusive to allow only one section open at a time. Opening a new section automatically closes the previous one.
<accordion-wc single> <details open> <summary>Only One Open</summary> <div> <p>Opening another section will close this one.</p> </div> </details> <details> <summary>Click Me</summary> <div> <p>The previous section automatically closes.</p> </div> </details></accordion-wc>FAQ Pattern
A common use case for accordions is displaying frequently asked questions.
<section class="faq"> <h2>Frequently Asked Questions</h2> <accordion-wc> <details> <summary>How do I get started?</summary> <div> <p>Install the package via npm and import the styles.</p> </div> </details> <details> <summary>Is JavaScript required?</summary> <div> <p>No! The accordion works without JavaScript.</p> </div> </details> </accordion-wc></section>Configuration
The <accordion-wc> element accepts these data attributes:
| Attribute | Values | Description |
|---|---|---|
data-exclusive |
Boolean (presence) | Only one item can be open at a time. |
Usage Notes
- Progressive enhancement: Works without JavaScript using native details/summary
- Initial state: Add
opento a<details>element to have it expanded by default - Content wrapper: Wrap panel content in a
<div>for proper animation - Keyboard navigation: Use arrow keys to navigate between accordion items when focused
- Accessibility: Screen readers announce expanded/collapsed state automatically
Related
Accordion WC
Web component documentation
Tabs
Tab interface component