# Accordion

An Accordion is a vertically stacked list of headers that user click to expand or collapse, revealing or hiding content panels.<br>

When to use Accordions :

* FAQ,
* Product Features
* Data filtering / Forms

When not to avoid Accordion :

* Minimal Content
* frequently accessed content
* Critical Information

> For deeper reference, check out [Mobbin](https://mobbin.com/glossary/accordion) guide on accordions.

<figure><img src="/files/K87mLn5WYwGiqTqUewOb" alt="Accordion example image"><figcaption></figcaption></figure>

## Basic Example

| Slot              | Description                                                                      |
| ----------------- | -------------------------------------------------------------------------------- |
| `header`          | Always visible. Acts as the trigger.                                             |
| `expandedContent` | Hidden by default. Revealed when expanded.                                       |
| `trailingIcon`    | Rendered horizontally alongside the header — typically an arrow or chevron icon. |

clicking the header toggles the `expaned` (hoisted) state, which shows or hides the `expandedContent`

```kotlin

var showAccordion by remember { mutableStateOf(false) }

Accordion(
    expanded = showAccordion,
    onExpand = {
        showAccordion = !showAccordion
    },
    header = {
        Text("Octopuses have three hearts and blue blood")
    },
    expandedContent = {
        Text(
            "Two hearts pump blood to the gills, while the third pumps it to the rest of the body."
        )
    },
    trailingIcon = {
        Icon(
            imageVector = PhIcons.Bold.CaretDownBold,
            contentDescription = "idk"
        )
    }
)

```

## Styling

`Accordion` exposes several parameters to customize its appearance and layout.

### Parameters

| Parameter                      | Type                     | Default                                                   | Description                                              |
| ------------------------------ | ------------------------ | --------------------------------------------------------- | -------------------------------------------------------- |
| `expanded`                     | `Boolean`                | —                                                         | Controls whether the content is visible.                 |
| `onExpand`                     | `() -> Unit`             | —                                                         | Called when the header is clicked.                       |
| `modifier`                     | `Modifier`               | `Modifier`                                                | Applied to the root container.                           |
| `header`                       | `@Composable () -> Unit` | —                                                         | The always-visible trigger content.                      |
| `expandedContent`              | `@Composable () -> Unit` | —                                                         | The content revealed when expanded.                      |
| `trailingIcon`                 | `@Composable () -> Unit` | —                                                         | Icon rendered on the right of the header.                |
| `leadingIcon`                  | `@Composable () -> Unit` | `null`                                                    | Icon rendered on the left of the header.                 |
| `separator`                    | `Boolean`                | `true`                                                    | Shows a divider between the header and expanded content. |
| `enterTransition`              | `EnterTransition`        | `AccordionDefaults.defaultExpandedContentEnterTransition` | Animation played when content expands.                   |
| `exitTransition`               | `ExitTransition`         | `AccordionDefaults.defaultExpandedContentExitTransition`  | Animation played when content collapses.                 |
| `leadingIconAlignment`         | `Alignment.Vertical`     | `AccordionDefaults.defaultLeadingIconAlignment`           | Vertical alignment of the leading icon.                  |
| `headerContentPaddingValues`   | `PaddingValues`          | `AccordionDefaults.defaultHeaderContentPadding`           | Padding applied to the header slot.                      |
| `expandedContentPaddingValues` | `PaddingValues`          | `AccordionDefaults.defaultExpandedContentPadding`         | Padding applied to the expanded content slot.            |

### Custom Transitions

You can override the default expand/collapse animations:

```kotlin
Accordion(
    expanded = showAccordion,
    onExpand = { showAccordion = !showAccordion },
    enterTransition = expandVertically(animationSpec = tween(400)),
    exitTransition = shrinkVertically(animationSpec = tween(400)),
    header = { Text("Octopuses have three hearts and blue blood") },
    expandedContent = {
        Text("Two hearts pump blood to the gills, while the third pumps it to the rest of the body.")
    },
    trailingIcon = {
        Icon(imageVector = PhIcons.Bold.CaretDownBold, contentDescription = null)
    }
)
```

### Custom Padding

```kotlin
Accordion(
    expanded = showAccordion,
    onExpand = { showAccordion = !showAccordion },
    headerContentPaddingValues = PaddingValues(horizontal = 20.dp, vertical = 16.dp),
    expandedContentPaddingValues = PaddingValues(horizontal = 20.dp, vertical = 12.dp),
    header = { Text("Octopuses have three hearts and blue blood") },
    expandedContent = {
        Text("Two hearts pump blood to the gills, while the third pumps it to the rest of the body.")
    },
    trailingIcon = {
        Icon(imageVector = PhIcons.Bold.CaretDownBold, contentDescription = null)
    }
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kore-1.gitbook.io/kore/documentation/data-display/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.