---
url: "https://vueda.dev/v3/reference/theming/keys/AccordionContent.md"
title: "AccordionContent"
---

# AccordionContent

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The animated collapsible content region. It owns the open and closed height animations and applies body text sizing while leaving padding to [AccordionContent.inner](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-inner).

Vue component: [AccordionContent](/v3/reference/api/vue/AccordionContent.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-root) | 2 classes | The animated collapsible content region. It owns the open and closed height animations and applies body text sizing while leaving padding to [AccordionContent.inner](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-inner). |
| [inner](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-inner) | `pt-0 pb-4` | The inner content inset for an accordion panel. It adds only bottom padding so content aligns with the trigger start while leaving the item divider visible. |

<a id="theme-key-AccordionContent-root"></a>

## root

> The animated collapsible content region. It owns the open and closed height animations and applies body text sizing while leaving padding to [AccordionContent.inner](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-inner).

Default classes:

```text
data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down
overflow-hidden text-body
```

Source: `client/lib/theme/vueda-tailwind/shell/AccordionContent.theme.js:18`

<a id="theme-key-AccordionContent-inner"></a>

## inner

> The inner content inset for an accordion panel. It adds only bottom padding so content aligns with the trigger start while leaving the item divider visible.

Default classes:

`pt-0 pb-4`

Source: `client/lib/theme/vueda-tailwind/shell/AccordionContent.theme.js:30`