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 data-exclusive> <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 open to 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