Accordion

Description #

<vaadin-accordion> is a Web Component implementing accordion widget: a vertically stacked set of expandable panels. The component should be used as a wrapper for two or more <vaadin-accordion-panel> components.

Panel headings function as controls that enable users to open (expand) or hide (collapse) their associated sections of content. The user can toggle panels by mouse click, Enter and Space keys.

Only one panel can be opened at a time, opening a new one forces previous panel to close and hide its content.

<vaadin-accordion>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
    <div>This panel is opened, so the text is visible by default.</div>
  </vaadin-accordion-panel>
  <vaadin-accordion-panel>
    <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
    <div>After opening this panel, the first one becomes closed.</div>
  </vaadin-accordion-panel>
</vaadin-accordion>

Styling #

See the <vaadin-accordion-panel> documentation for the available state attributes and stylable shadow parts.

See Styling Components documentation.

Properties #

items #

Type: HTMLElement[]

The list of <vaadin-accordion-panel> child elements. It is populated from the elements passed to the light DOM, and updated dynamically when adding or removing panels.

opened #

Type: number | null

The index of currently opened panel. First panel is opened by default. Only one panel can be opened at the same time. Setting null or undefined closes all the accordion panels.

Events #

items-changed #

Type: AccordionItemsChangedEvent

Fired when the items property changes.

opened-changed #

Type: AccordionOpenedChangedEvent

Fired when the opened property changes.

Types #

AccordionItemsChangedEvent #

/**
 * Fired when the `items` property changes.
 */
export type AccordionItemsChangedEvent = CustomEvent<{ value: AccordionPanel[] }>;

AccordionOpenedChangedEvent #

/**
 * Fired when the `opened` property changes.
 */
export type AccordionOpenedChangedEvent = CustomEvent<{ value: number | null }>;