Vue Accordion Component API

Accordion API

Explore the API reference for the Vue Accordion component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CAccordion } from '@coreui/vue'

Property	Default	Type
activeItemKeyDeprecated 6.0.0	`undefined`	`CAccordionItemKey`
Sets the initially open items when the component mounts. Use `openItemKeys` instead, which takes the same single value. An accordion holds open items rather than an active one — `active` is the vocabulary of a selection, which is what `CTabs` has.
alwaysOpen	-	`boolean`
Make accordion items stay open when another item is opened
flush	-	`boolean`
Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
gap6.0.0+	-	`boolean`
Spaces the items apart and gives each one a full border radius, so the accordion reads as a stack of cards.
openItemKeys6.0.0+	`undefined`	`CAccordionItemKey`, `CAccordionItemKey[]`
Controls which items are open. Bind it with `v-model:open-item-keys` to hand control to the parent; passed one-way it seeds the starting state and the accordion keeps managing itself. Takes a single key as well as an array — an array only opens more than one item under `alwaysOpen`, since the HTML Standard forbids leaving more than one open item in a `name` group.
size6.0.0+	-	`string`
Tighten padding, radius and font size for a more compact accordion.
theme6.0.0+	-	`Color`
Tint the open item with one of CoreUI’s themed colors. Closed items are untouched, so the theme marks what is currently expanded rather than recoloring the whole control.

Event name
change
Callback fired when the open items change. - When `openItemKeys` is bound with `v-model`, you must update it yourself based on the value received. - Otherwise this callback is called after the internal state updates.
update:openItemKeys
Emit the new open items to support the `v-model:open-item-keys` binding.

jsx

import { CAccordionBody } from '@coreui/vue'

jsx

import { CAccordionHeader } from '@coreui/vue'

jsx

import { CAccordionItem } from '@coreui/vue'

Property	Default	Type
id	-	`string`
The id global attribute defines an identifier (ID) that must be unique in the whole document.
itemKey	`undefined`	`[Number, String] as (NumberConstructor \| StringConstructor)[]`
The item key.
open6.0.0+	`undefined`	`boolean`
Controls whether the item is open, overriding the accordion's own list. When provided, the item operates in a controlled mode: update the value yourself from the `shown` and `hidden` events. Prefer `openItemKeys` on the accordion where the whole set is driven together.
visibleDeprecated 6.0.0	`undefined`	`boolean`
Controls whether the item is open. Use `open` instead — the item renders a `<details>` element, and that is what the attribute is called there.

Event name
hidden
Callback fired when the item has been hidden.
shown
Callback fired when the item has been shown.