daisyUI Kit 🌼

Accordion

Think of Accordion as a "CollapseGroup". It only allows one item to be open at a time and also can track a value using v-model. Accordion has no styles of its own, so it can match any UI.

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 Two is selected, this content will show.
Code Example 
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('one')
</script>

<template>
  <Accordion v-model="value">
    <Collapse value="one" class="my-4">
      <CollapseTitle class="font-bold bg-base-300">
        Collapse One
      </CollapseTitle>
      <CollapseContent class="bg-base-200">
        When Collapse One is selected, this content will show.
      </CollapseContent>
    </Collapse>

    <Collapse value="two">
      <CollapseTitle class="font-bold bg-base-300">
        Collapse Two
      </CollapseTitle>
      <CollapseContent class="bg-base-200">
        When Collapse Two is selected, this content will show.
      </CollapseContent>
    </Collapse>
  </Accordion>
</template>

Components

Accordion

The Accordion component has a single prop:

PropTypeDescription
modelValue
any
Allows setting model value. Use with v-model.

Collapse

The Accordion wraps multiple Collapse components. Each Collapse must have a value property set.

CollapseTitle

Use CollapseTitle inside a Collapse.

CollapseContent

Use CollapseContent inside a Collapse.

Instructions

Follow these steps to use Accordion:

  1. Wrap an Accordion around a set of Collapse components
  2. Pass the Accordion a v-model.
  3. Give each Collapse component a value prop.

Now the v-model on the Accordion will stay in sync with the value on the active Collapse.