HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
AccordionView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA group of collapsible sections.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/accordion'import'@fusion.dev/helix-headless/accordion'Preview
API ReferenceRoothelix-accordionA group of collapsible sections.
PropTypeDescriptionheadingLevelnumberThe level of the heading around each trigger, from 1 to 6.hiddenUntilFoundbooleanDefaulttrueWhether find in page searches every closed section, and opens the one it
matches in.mode"single"|"single-collapsible"How many sections may be open at once.separation"outlined"|"plain"How the items are set off from the page. plain draws a line between
items, and outlined draws a border around each item.
ReadTypeDescriptionitemsHelixHeadlessAccordionItem[]The accordion's own items, in the order they are written. Browser only.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The accordion's items.
CSS PropertyDescription--accordion-border-colorThe color of the lines between items, and of each item's border when outlined.--accordion-gapThe space between items when outlined. Otherwise items share an edge.--accordion-radiusThe corner radius of each item when outlined.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-accordion-itemOne collapsible section of an accordion.
PropTypeDescriptionchevronPlacement"auto"|"start"|"end"|"none"Where the chevron sits, or none for no chevron.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.disabledbooleanDefaultfalseWhether the section is disabled, so its trigger cannot be pressed or
reached with the arrow keys. A script can still open and close it.headingLevelnumberThe level of the heading around the trigger, from 1 to 6.hiddenUntilFoundbooleanWhether find in page searches the section while it is closed, and opens it
on a match.namestringA group name. Opening an item closes the other items with the same name,
as <details name> does.openbooleanWhether the element is open.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content shown when the section is open.chevronReplaces the open and close indicator. A slotted icon is sized, colored and turned like the drawn one.summaryThe text of the button that opens and closes the section. Always shown.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe section is about to close. Cancelable: cancel it to keep it open.helix-before-openHelixBeforeOpenEventThe section is about to open. Cancelable: cancel it to keep it closed.toggleToggleEventThe section opened or closed. The event carries newState and oldState.
MethodTypeDescriptionfocusTrigger() => voidMoves focus to this item's trigger.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionchevronThe open and close indicator.containerThe outer wrapper.contentThe region that holds the content.content-innerThe clipping box inside the animated region. The padding is on the slot inside it, so a closed section leaves no space.headingThe heading that holds the trigger.triggerThe button that opens and closes the section, holding the summary.
CSS PropertyDescription--accordion-content-heightThe height of the content, in pixels, written on the content part while the section is open.--accordion-item-chevron-colorThe color of the open and close indicator.--accordion-item-chevron-hover-colorThe indicator's color while the pointer is on the trigger.--accordion-item-colorThe color of the trigger's text.--accordion-item-content-colorThe color of the content's text.--accordion-item-disabled-opacityHow faint a disabled trigger is drawn.--accordion-item-font-sizeThe size of the trigger's text.--accordion-item-font-weightThe weight of the trigger's text.--accordion-item-hover-background-colorThe trigger's fill while the pointer is on it. Unset, there is none.--accordion-item-paddingThe padding of the trigger and the content.
Custom stateDescriptionclosingWhile the item has closed and its content is still drawn, until the content part's animations end.openWhile the item is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-accordionA group of collapsible sections.
PropTypeDescriptionheadingLevelnumberThe level of the heading around each trigger, from 1 to 6.hiddenUntilFoundbooleanDefaulttrueWhether find in page searches every closed section, and opens the one it
matches in.mode"single"|"single-collapsible"How many sections may be open at once.
ReadTypeDescriptionitemsHelixHeadlessAccordionItem[]The accordion's own items, in the order they are written. Browser only.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The accordion's items.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-headless-accordion-itemOne collapsible section of an accordion.
PropTypeDescriptionchevronPlacement"auto"|"start"|"end"|"none"Where the chevron sits, or none for no chevron.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.disabledbooleanDefaultfalseWhether the section is disabled, so its trigger cannot be pressed or
reached with the arrow keys. A script can still open and close it.headingLevelnumberThe level of the heading around the trigger, from 1 to 6.hiddenUntilFoundbooleanWhether find in page searches the section while it is closed, and opens it
on a match.namestringA group name. Opening an item closes the other items with the same name,
as <details name> does.openbooleanWhether the element is open.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content shown when the section is open.chevronReplaces the open and close indicator, such as with your own icon.summaryThe text of the button that opens and closes the section. Always shown.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe section is about to close. Cancelable: cancel it to keep it open.helix-before-openHelixBeforeOpenEventThe section is about to open. Cancelable: cancel it to keep it closed.toggleToggleEventThe section opened or closed. The event carries newState and oldState.
MethodTypeDescriptionfocusTrigger() => voidMoves focus to this item's trigger.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionchevronThe open and close indicator.containerThe outer wrapper.contentThe region that holds the content.content-innerThe clipping box inside the animated region.headingThe heading that holds the trigger.triggerThe button that opens and closes the section, holding the summary.
CSS PropertyDescription--accordion-content-heightThe height of the content, in pixels, written on the content part while the section is open.
Custom stateDescriptionclosingWhile the item has closed and its content is still drawn, until the content part's animations end.openWhile the item is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionChevron At The StartThe chevron before the summary, so nested sections read as a tree.EventsThe events each section sends. They do not bubble, so listen on each section.OutlinedA border around each item, for an accordion placed directly on the page.PlainNo border and no fill, for sections inside a container that already has both.PreviewSections that open one at a time or together, with the first already open.PreviewSections that open one at a time or together, with the first already open.SingleOne section open at a time. Opening a section closes the one that was open.