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.
Live Previews
Section titled “Live Previews”Single-open (default)
Section titled “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
Section titled “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>API Reference
Section titled “API Reference”holo-accordion Properties
Section titled “holo-accordion Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------------------- | --------- | ------- |
| multiple | multiple | If true, multiple items may be expanded at once (default: single-open). | boolean | false |
holo-accordion Events
Section titled “holo-accordion Events”| Event | Description | Type |
| --------------------- | ------------------------------------------------------- | --------------------------------------------------- |
| holoAccordionToggle | Emitted whenever a child item is expanded or collapsed. | CustomEvent<{ value: string; expanded: boolean }> |
holo-accordion-item Properties
Section titled “holo-accordion-item Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | --------------------------------------------------------------------------------------- | --------- | ----------- |
| heading | heading | The text label rendered in the header button. Use the “heading” slot for richer markup. | string | undefined |
| value | value | An identifier for this item, reported in holoAccordionToggle events. | string | undefined |
| expanded | expanded | Whether this item’s content region is expanded. | boolean | false |
| disabled | disabled | If true, this item’s header is disabled and non-interactive. | boolean | false |