Holo Accordion & Accordion Item

<holo-accordion> manages a set of <holo-accordion-item> children, each with a header button (aria-expanded, aria-controls) and a content region (role="region", aria-labelledby). By default only one item can be expanded at a time; set multiple to allow several items open at once.

When to use

Use it for:

Grouping long content into labelled sections that readers expand one at a time, such as FAQs or settings groups.
Hiding secondary detail while keeping every section heading visible.

Don’t use it for:

A single standalone disclosure. Use Details instead.
Switching between peer views of the same content. Use Tabs.
Content that every reader needs to see. Show it directly.

Live Previews

Single-open (default)

Free shipping on orders over $50.

Returns accepted within 30 days.

Two-year limited warranty included.

<holo-accordion>
  <holo-accordion-item value="shipping" heading="Shipping" expanded> Free shipping on orders over $50. </holo-accordion-item>
  <holo-accordion-item value="returns" heading="Returns"> Returns accepted within 30 days. </holo-accordion-item>
</holo-accordion>

Multiple-open

Free shipping on orders over $50.

Returns accepted within 30 days.

<holo-accordion multiple>
  <holo-accordion-item value="shipping" heading="Shipping" expanded> Free shipping on orders over $50. </holo-accordion-item>
  <holo-accordion-item value="returns" heading="Returns" expanded> Returns accepted within 30 days. </holo-accordion-item>
</holo-accordion>

Accessibility

Each <holo-accordion-item> renders an <h3> containing a native <button type="button"> with aria-expanded and aria-controls. The panel is a role="region" labelled by that button through aria-labelledby, and is hidden while collapsed. The trigger is named by the heading prop or the heading slot.

Key	Action
`Tab`	Moves focus to the next header button (or other focusable content)
`Enter`, `Space`	Expands or collapses the focused item

Every header button is a normal tab stop. There is no arrow-key navigation between headers.
A disabled item uses the native disabled attribute, so it leaves the tab order.
Focus stays on the header button when a panel opens or closes. A visible focus ring is drawn on the button with :focus-visible.

You provide:

A meaningful heading for every item. The heading level is fixed at h3, so check it fits your page outline.
Panel content that makes sense on its own, since collapsed panels are hidden and not exposed to assistive technology.

API Reference

`holo-accordion`

Importing

import '@philbob-sideprojects/hololink-ui/holo-accordion';

Properties

Property	Attribute	Type	Default	Description
`multiple`	`multiple`	`boolean`	`false`	If true, multiple holo-accordion-item children may be expanded at once. Defaults to false (single-open / mutually-exclusive expansion).

Events

Event	Detail	Description
`holoAccordionToggle`	`HoloAccordionToggleDetail`	Emitted whenever a child `holo-accordion-item` is expanded or collapsed by the user. `detail` is `{ value: string; expanded: boolean }`, where `value` is the item's `value` (or its generated id).

Slots

Slot	Description
(default)	The `holo-accordion-item` elements to group.

CSS custom properties

Property	Description
`--holo-accordion-border-color`	Color of the border above the first item.

`holo-accordion-item`

Importing

import '@philbob-sideprojects/hololink-ui/holo-accordion-item';

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	If true, this item's header is disabled and non-interactive.
`expanded`	`expanded`	`boolean`	`false`	Whether this item's content region is expanded. Managed by the parent holo-accordion when it enforces single-open behavior.
`heading`	`heading`	`string`	—	The text label rendered in the header button. Use the "heading" slot instead for richer markup.
`value`	`value`	`string`	—	An identifier for this item, reported in holoAccordionToggle events. Defaults to an auto-generated id if omitted.

Events

Event	Detail	Description
`holoAccordionItemToggle`	`HoloAccordionToggleDetail`	Emitted (bubbles + composed) when the user toggles this item's header. `detail` is `{ value: string; expanded: boolean }`. The parent `holo-accordion` listens for it to enforce single-open behavior and re-emits it as `holoAccordionToggle`.

Slots

Slot	Description
(default)	The content revealed when the item is expanded.
`heading`	Rich header content. Replaces the `heading` text when provided.

CSS custom properties

Property	Description
`--holo-accordion-border-color`	Color of the divider below the item.
`--holo-accordion-text-color`	Text color of the header button.