Accordion

The Accordion component allows users to expand and collapse grouped content on a page.

Usage

<div>
  <wcp-accordion group="my-group" opened>
    <span slot="summary">Accordion Title</span>
    <p>Accordion Content</p>
  </wcp-accordion>

  <wcp-accordion group="my-group">
    <span slot="summary">Accordion Title</span>
    <p>Accordion Content</p>
  </wcp-accordion>
</div>

Accessibility Considerations

By default, the summary element is assigned a heading role at level 3. You can modify this by using the "heading-level" attribute or the headingLevel property. For instance, when placing this component within a list like an FAQ, you may set "heading-level" to "none" to remove heading semantics if they are inappropriate for the document structure.

Performance Considerations

The accordion expands within the normal document flow, pushing content below and triggering layout reflow.

• Animating an accordion near the top of a long page can cause full-page layout recalculations on each frame, potentially affecting performance.
• Animations work best when the accordion is near the bottom of a scroll container or within a constrained layout (e.g., panels, sidebars, modals).
• For large pages or performance-critical views, consider disabling animations or placing the accordion in an isolated scroll container.

API References

Methods

open()

Expand the accordion component.

Type: (noAnimation?: boolean) => void

close()

Collapse the accordion component.

Type: (noAnimation?: boolean) => void

toggle()

Toggle the accordion component between expand and collapse.

Type: (noAnimation?: boolean) => void

Properties

group

The group name. Components with the same group name will only allow one to be opened at a time.

Accessors: Get, Set
Type: string

opened

Set or retrieve the accordion open state.

Accessors: Get, Set
Type: boolean
Default: false

disabled

Disable interaction with the accordion.

Accessors: Get, Set
Type: boolean

marker

Toggle/change the marker position.

Accessors: Get, Set
Type: "start" | "end" | "none"
Default: "end"

headingLevel

For accessibility: controls the ARIA heading level of the summary. Accepts "1"–"6" or "none" to remove heading
semantics.

Accessors: Get, Set
Type: "1" | "2" | "3" | "4" | "5" | "6" | "none" | null
Default: "3"

Attributes

"opened"

Set the accordion open state.

Type: boolean

"group"

The group name. Components with the same group name will only allow one to be opened at a time.

Type: string

"disabled"

Disable interaction with the accordion.

Type: boolean

"marker"

Toggle/change the marker position.

Values: "start", "end", "none"
Default: "end"

"heading-level"

For accessibility: controls the ARIA heading level of the summary. Accepts "1"–"6" or "none" to remove heading
semantics.

Values: "1", "2", "3", "4", "5", "6", "none"
Default: "3"

Events

toggled

Fired when the accordion state changes due to user interaction only.

Fires immediately after the state is set, regardless of animations.

transitioned

Fired when the open/close animation completes.

Fires for both user interactions and programmatic changes. Use this when you need to perform actions after the accordion is
fully opened or closed.

detail: Either “opened” or “closed” indicating the final state

Slots

marker

Use this slot to replace the accordion’s default icon. The slot applies the styling and animation, so they remain intact.

summary

the summary of the accordion component.

Default

The content of the accordion component.

CSS Properties

--wcp-toggle-dur

Duration of the expand/collapse animation.

--wcp-toggle-ease

Easing for the expand/collapse animation.

--wcp-base-2

• Background color for the summary (accordion header).
• Background color for the content area.

--wcp-base-content

Text color applied to both the summary and the content.

--wcp-base-1

Border color used throughout the accordion.

--wcp-bdr-rad-md

Border radius for the accordion container.

--wcp-bdr-sz-sm

Border thickness for the accordion container.

--wcp-dir

Layout direction: 1 for LTR, -1 for RTL.

CSS Parts

::part(container)

The root container element.

::part(heading)

The summary heading element that contains the trigger button.

::part(trigger)

The trigger button element.

::part(marker)

The default marker icon. Can be overridden with the marker slot.

::part(expander)

The content expander element.

::part(content)

The content container element.

CSS States

:state(--open)

The accordion is open.

:state(--disabled)

The accordion is disabled.