Accordion Item

shadow

wje-accordion-item is the actual interactive section inside wje-accordion. It handles headline clicks, state switching, ARIA wiring between the headline and content panel, the fallback toggle icon, and the open or close events.

Basic usage inside a group

The example below uses a single item inside wje-accordion so it is clear where the headline, description, and content slots belong. The headline can contain more than plain text, including supporting or action components.

Things To Keep In Mind

• The headline slot becomes the clickable header. After rendering, the component assigns role="button", tabindex="0", aria-controls, and aria-expanded.
• The description slot adds supporting text in the header and content holds the expandable panel body.
• The toggle slot is optional. If you do not provide one, the component renders a fallback wje-icon chevron.
• wje-accordion-item:open and wje-accordion-item:close bubble to the parent wje-accordion.
• Programmatic open and close behavior is exposed through expand() and collapse().
• Color variants are applied through the color attribute, while detailed styling is handled through shadow parts and CSS custom properties.

Accessibility

• The headline is keyboard-operable with Enter and Space.
• The content panel uses role="region" and is linked back to the headline through aria-labelledby.
• If you embed multiple interactive controls in the headline, verify that their behavior does not conflict with clicking the whole header.

Best Practices

• Keep the headline slot focused on a clear section title rather than a long paragraph.
• Keep description concise; longer explanatory content belongs in content.
• If you replace the default toggle via the toggle slot, preserve a clear affordance that the item expands and collapses.
• When opening or closing items programmatically, keep the parent wje-accordion state in mind.

Attributes and Properties

color

Description	Applies a contextual color variant such as primary, success, danger, warning, info, or complete.
Attribute	color
Type	string
Default	-

Events

Name	Description
wje-accordion-item:open	Dispatched when the item is expanded.
wje-accordion-item:close	Dispatched when the item is collapsed.

Methods

collapse

Description	Collapses the accordion item and updates the headline ARIA state.
Signature	() => void

expand

Description	Expands the accordion item and updates the headline ARIA state.
Signature	() => void

CSS Shadow Parts

Name	Description
native	The wrapper of the whole accordion item.
headline	The clickable headline area.
description	The description slot container inside the headline.
toggle	The toggle slot container and fallback chevron area.
content	The expandable content panel.

CSS Custom Properties

Name	Description
--wje-accordion-background	Background color of the collapsed item wrapper.
--wje-accordion-border	Border color of the collapsed item wrapper.
--wje-accordion-border-radius	Border radius of the item wrapper.
--wje-accordion-background-hover	Background color used when the headline is hovered.
--wje-accordion-border-hover	Border color used when the headline is hovered.
--wje-accordion-background-expanded	Background color of the expanded item wrapper.
--wje-accordion-border-expanded	Border color of the expanded item wrapper.
--wje-accordion-headline-color	Text color of the headline area.
--wje-accordion-content-color	Text color of the expandable content area.
--wje-accordion-marker-rotate	Rotation applied to the toggle marker icon.

Slots

Name	Description
headline	Slot for the clickable accordion headline content.
description	Slot for supporting text shown below the headline.
toggle	Slot for a custom toggle icon or toggle content.
content	Slot for the expandable panel body.