---
title: AccordionPanel
description: AccordionPanel
element: vaadin-accordion-panel
---

## Description

The accordion panel element.

### Styling

The following shadow DOM parts are exposed for styling:

Part name        | Description
-----------------|----------------
`content`        | The wrapper for the collapsible panel content.

The following state attributes are available for styling:

Attribute      | Description
---------------|------------
`opened`       | Set when the collapsible content is expanded and visible
`disabled`     | Set when the element is disabled
`focus-ring`   | Set when the element is focused using the keyboard
`focused`      | Set when the element is focused
`has-tooltip`  | Set when the element has a slotted tooltip

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### autofocus

**Type:** `boolean`

Specify that this control should have input focus when the page loads.

### disabled

**Type:** `boolean`

If true, the user cannot interact with this element.

### opened

**Type:** `boolean`

If true, the collapsible content is visible.

### summary

**Type:** `string | null | undefined`

A text that is displayed in the heading, if no
element is assigned to the `summary` slot.

## Events

### opened-changed

**Type:** [AccordionPanelOpenedChangedEvent](#accordionpanelopenedchangedevent)

Fired when the `opened` property changes.

## Types

### AccordionPanelOpenedChangedEvent

```ts
/**
 * Fired when the `opened` property changes.
 */
export type AccordionPanelOpenedChangedEvent = CustomEvent<{ value: boolean }>;
```