Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Basic accordion usage
<accordion-wc> <details> <summary>What is Vanilla Breeze?</summary> <div> <p>Vanilla Breeze is a layered HTML component system...</p> </div> </details> <details> <summary>How does progressive enhancement work?</summary> <div> <p>Components work without JavaScript first...</p> </div> </details></accordion-wc>Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
single | boolean | — | Only allow one panel open at a time |
bordered | boolean | — | Add borders between panels |
flush | boolean | — | Remove outer border and padding |
compact | boolean | — | Reduce spacing |
indicator | "plus-minus", "none", "custom" | — | Expand/collapse indicator style |
transition | "fade", "slide", "scale" | — | Panel transition animation |
Required Structure
| Element | Required | Description |
|---|---|---|
<details> | yes | One per accordion panel — native disclosure element |
<summary> | yes | Panel heading inside each <details> |
Single-Open Mode
Add 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.
Single-open mode accordion
<accordion-wc single> <details name="faq" open> <summary>First Panel</summary> <div><p>Content...</p></div> </details> <details name="faq"> <summary>Second Panel</summary> <div><p>Content...</p></div> </details></accordion-wc>Bordered Variant
Add 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.
Bordered accordion variant
<accordion-wc bordered> <details> <summary>Bordered Style</summary> <div><p>Content...</p></div> </details> ...</accordion-wc>Compact Variant
Add 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.
Compact accordion variant
<accordion-wc compact> <details> <summary>Compact Item 1</summary> <div><p>Smaller padding...</p></div> </details> ...</accordion-wc>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 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.
Indicator style variants
<!-- Default chevron (right/down) --><accordion-wc>...</accordion-wc> <!-- Plus-minus indicator --><accordion-wc indicator="plus-minus">...</accordion-wc> <!-- Custom indicators with arrows --><accordion-wc indicator="custom" style="--indicator-closed: '\\2192'; --indicator-open: '\\2193';"> ...</accordion-wc> <!-- Custom indicators with emoji --><accordion-wc indicator="custom" style="--indicator-closed: '\u{1F534}'; --indicator-open: '\u{1F7E2}';"> ...</accordion-wc> <!-- No indicator --><accordion-wc indicator="none">...</accordion-wc>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-wc:toggle |
{ index: number, open: boolean } |
Fired when a panel is opened or closed. |
Listening to accordion events
const accordion = document.querySelector('accordion-wc'); accordion.addEventListener('accordion-wc:toggle', (event) => { const { index, open } = event.detail; console.log(`Panel ${index} is now ${open ? 'open' : '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. |
Programmatic accordion control
const accordion = document.querySelector('accordion-wc'); // Open the second panelaccordion.open(1); // Close the first panelaccordion.close(0); // Toggle the third panelaccordion.toggle(2); // Open all panels (not in single mode)accordion.openAll(); // Close all panelsaccordion.closeAll();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 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 transition with 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.