# kol-accordion

<!-- Auto Generated Below -->


## Overview

The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.

Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.

## Properties

| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |
| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                                                                                                            | `false`     |
| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |
| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                                                                                    | `0`         |
| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                                                                                            | `false`     |


## Methods

### `click() => Promise<void>`

Triggers a click on the trigger button of the first section.

#### Returns

Type: `Promise<void>`



### `focus(options?: KolFocusOptions) => Promise<void>`

Sets focus on the internal element.

#### Parameters

| Name      | Type                           | Description |
| --------- | ------------------------------ | ----------- |
| `options` | `KolFocusOptions \| undefined` |             |

#### Returns

Type: `Promise<void>`




## Slots

| Slot | Description                                                                  |
| ---- | ---------------------------------------------------------------------------- |
|      | Allows arbitrary HTML to be inserted into the content area of the accordion. |


----------------------------------------------


