HoopsAccordion

class ui.accordion.HoopsAccordion()

A custom web component that implements an accessible accordion using LitElement.

Examples

<hoops-accordion expanded><span slot="header">My Header</span><div slot="content">Content here</div></hoops-accordion>

Custom Element

hoops-accordion

Attributes

expanded

Indicates whether the accordion is expanded

disabled

Indicates whether the accordion is disabled

level

The aria-level attribute for the heading element

Slots

header

Slot for the accordion header content

toolbar

Slot for the accordion header toolbar

icon

Slot for the accordion icon, defaults to an arrow icon

content

Slot for the accordion content

Events

change

Dispatched when the accordion is toggled

CSS Properties

–hoops-svg-accent-color

The accent color for the accordion

–hoops-svg-fill-color

The fill color for the accordion icon

–hoops-background

The background color for the accordion panel

–hoops-neutral-background-50

The background color of accordion button

–hoops-foreground

The foreground color for the accordion text

CSS Parts

button

The button element that toggles the accordion

panel

The panel element that contains the accordion content

Since

2025.8.0

Index

Constructors

Properties

Constructors

ui.accordion.HoopsAccordion.constructor()
HoopsAccordion(): HoopsAccordion

Returns: HoopsAccordion

Properties

ui.accordion.HoopsAccordion.disabled
disabled: boolean
ui.accordion.HoopsAccordion.expanded
expanded: boolean
ui.accordion.HoopsAccordion.level

optional

level: number