Accordion

Accordion is a wrapper for multiple Collapse components. It only allows one item to be open at a time and can track a value using v-model. Accordion has no styles of its own, so it can match any UI.

Basic Example

Collapse One
When Collapse One is selected, this content will show.
Collapse Two
When Collapse Two is selected, this content will show.
Collapse Three
When Collapse Three is selected, this content will show.
Code Example
BasicAccordion.vue
 Components 
The Accordion components include the following:
  • Accordion - is a wrapper for grouping multiple Collapse components.
  • Collapse - shows and hides content behind a title.
  • CollapseTitle - goes inside the Collapse and toggles the state when clicked.
  • CollapseContent - holds content and will display when the Collapse is open.
Accordion
The wrapper component for grouping multiple Collapse components. Only one Collapse can be open at a time. Tracks the open value using v-model.
Accordion Props  Type  Description 
modelValue
string | number
The currently open item's value. Use with v-model for two-way binding.
Accordion Events  Arguments  Description 
update:modelValue

value: string | number

Emitted when the open value changes (for v-model sync).
Accordion Slots  Description 
default
The default slot. Place Collapse components as children here.
Accordion Provides  Type  Description 
accordion-value

Ref<string | number | undefined>

The current value being tracked by the Accordion (provided via Vue provide/inject).
DaisyUI Kit 🌼