Accordion

shadow

The wje-accordion groups the wje-accordion-item entries and coordinates their state. It makes the most sense when you want multiple drop-down sections with common logic, such as a single open item mode or an initially opened item via index.

Basic use

The sample below shows wje-accordion with one wje-accordion-item to make it clear how the wrapper and the item work together. The headline doesn't have to be just text; you can also include status or action components.

Colour variants of items

The coloring is set on the individual wje-accordion-item, not on the wrapper itself. Thus, you can combine different meaning variants in one group according to the specific item.

Multiple open items at once

The sample demonstrates the multiple attribute, where opening one item does not close the others. It also uses an index that determines the initially opened item by its order in the DOM.

What's worth thinking about

• Insert direct children wje-accordion-item into the wrapper.
• If multiple is not set, opening one item will close the others.
• The wje-accordion is a coordination wrapper; most of the visuals, slots, and interaction belong to wje-accordion-item.
• Host sets role="presentation", so that the accessibility of the interaction is handled by the items themselves.

Accessibility

• Make sure that each entry has a clear and understandable headline slot.
• If you are inserting additional interactive elements into the headline, test the focus order and keyboard behavior in a realistic layout.
• If it is important to respond to opening or closing an item in the parent code, listen for bubbling events from wje-accordion-item.

Recommended practices

• Only group sections that are thematically related into one accordion.
• If you use multiple, do so consciously; long content will quickly "stretch" the page.
• Use colour variations to convey the meaning of an item, not just as decoration.

Attributes and properties

index

Popis	Nastavuje index aktuálne aktívnej položky accordionu.
Atribút	index
Typ	number
Predvolené	0

multiple

Popis	Umožňuje mať rozbalených viac položiek accordionu naraz.
Atribút	multiple
Typ	boolean
Predvolené	false

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

collapseAll

Popis	Zatvorí všetky accordion položky okrem voliteľne zadanej výnimky.
Signatúra	(exception: any) => void

getAccordions

Popis	Vráti priame deti wje-accordion-item, ktoré accordion spravuje.
Signatúra	() => Array

CSS shadow parts

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.