---
title: Accordion
description: Accordion
element: vaadin-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.

```html
<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

Accordion does not have own stylable shadow parts or state attributes. Instead, apply styles to
the following components:

- [`<vaadin-accordion-heading>`](/elements/vaadin-accordion-heading)
- [`<vaadin-accordion-panel>`](/elements/vaadin-accordion-panel)

See [Styling Components](https://vaadin.com/docs/latest/styling/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](#accordionitemschangedevent)

Fired when the `items` property changes.

### opened-changed

**Type:** [AccordionOpenedChangedEvent](#accordionopenedchangedevent)

Fired when the `opened` property changes.

## Types

### AccordionItemsChangedEvent

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

### AccordionOpenedChangedEvent

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