accordion-wc
Collapsible content panels with optional single-open mode, built on native <details> elements.
Overview
The <accordion-wc> component wraps a group of <details> elements to provide an accessible accordion interface with keyboard navigation and optional visual variants.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-single |
boolean | false |
Only allow one panel to be open at a time. |
data-bordered |
boolean | false |
Add borders around the accordion and between items. |
data-compact |
boolean | false |
Use smaller padding for denser layouts. |
data-indicator |
string | chevron |
Indicator style: chevron, plus-minus, custom, or none. |
data-transition |
string | fade |
Enable View Transition animations on open/close. Values: fade, slide, scale. |
Single-Open Mode
Add data-single to allow only one panel to be open at a time. When a panel opens, any other open panel will close automatically.
First Panel (open by default)
This panel is open by default. Click another panel to see it close.
Second Panel
Opening this panel will automatically close the first one.
Third Panel
Only one panel can be open at a time in single mode.
Bordered Variant
Add data-bordered to wrap the accordion in a border with dividers between items.
Bordered Style
The bordered variant adds a container border and dividers between items.
Clean Appearance
Useful for forms, FAQs, and settings panels.
Visual Separation
Borders help visually separate accordion items from surrounding content.
Compact Variant
Add data-compact for tighter spacing, useful in sidebars or when displaying many items.
Compact Item 1
Smaller padding for dense layouts.
Compact Item 2
Still fully accessible.
Compact Item 3
Great for navigation menus.
Combined Variants
Variants can be combined for different visual styles.
First Question
This is the answer to the first question.
Second Question
This is the answer to the second question.
Navigation Item 1
Content for item 1.
Navigation Item 2
Content for item 2.
Settings Group 1
Settings options here.
Settings Group 2
More settings options.
Indicator Styles
Use data-indicator to change the open/close indicator. Four styles are available: chevron (default), plus-minus, custom, and none.
Chevron points right when closed
And rotates down when open. This is the default indicator style.
Standard accordion behavior
Most users expect this chevron pattern from accordions.
Shows + when closed
The plus sign transforms to a minus when open.
Common in FAQ sections
Plus-minus indicators are often used for expandable content.
No indicator shown
Useful when you want a cleaner look or have custom indicators.
Still fully functional
Click to expand and collapse as normal.
Keyboard Navigation
When focused on a panel header, the following keyboard shortcuts are available:
| Key | Action |
|---|---|
| ArrowDown | Move focus to the next panel header |
| ArrowUp | Move focus to the previous panel header |
| Home | Move focus to the first panel header |
| End | Move focus to the last panel header |
| Enter / Space | Toggle the focused panel (native behavior) |
Events
The component dispatches events when panels are toggled.
| Event | Detail | Description |
|---|---|---|
accordion-toggle |
{ index: number, open: boolean } |
Fired when a panel is opened or closed. |
JavaScript API
The component exposes methods for programmatic control.
| Method | Parameters | Description |
|---|---|---|
open(index) |
index: number |
Open a specific panel by its 0-based index. |
close(index) |
index: number |
Close a specific panel by its 0-based index. |
toggle(index) |
index: number |
Toggle a specific panel open/closed. |
openAll() |
- | Open all panels (only works when not in single mode). |
closeAll() |
- | Close all panels. |
Accessibility
ARIA Attributes
The component automatically applies ARIA attributes for accessibility:
aria-expandedon each summary indicates open/closed statearia-controlslinks summaries to their panelsaria-labelledbylinks panels back to their summariesrole="region"on panels for landmark navigation
Screen Reader Announcements
Screen readers will announce the expanded/collapsed state when panels are toggled. The keyboard navigation allows users to move between headers without expanding panels.
Focus Management
Focus remains on the summary element when toggling, and arrow key navigation moves focus between summaries without changing the open state.
View Transitions
Add data-transition to animate panel content when opening and closing using the View Transitions API. The content fade composes with the existing CSS ::details-content height animation — height animates via CSS, content appearance via VT.
| Value | Effect |
|---|---|
fade (default) | Crossfade panel content |
slide | Slide panel content in from the side |
scale | Scale panel content in/out |
What makes this different?
The View Transition API animates the content appearance while native CSS handles the height. Both work together seamlessly.
Does it work with single mode?
Yes — combine data-transition with data-single for animated exclusive panels.
What about reduced motion?
Animations are disabled when prefers-reduced-motion is active or data-motion-reduced is set on the root element.
FAQ Example
A common use case for accordions is FAQ sections.
How do I get started?
Install Vanilla Breeze via npm or include the CSS and JS files directly. Then start using the components in your HTML.
Is JavaScript required?
No! All components work without JavaScript using native HTML features. JavaScript enhances the experience with better keyboard navigation and ARIA support.
Can I customize the styles?
Yes, all components use CSS custom properties for easy theming. Override the variables in your stylesheet to match your brand.
What about browser support?
Vanilla Breeze supports all modern browsers including Chrome, Firefox, Safari, and Edge. The progressive enhancement approach means older browsers still get a functional experience.