Skip to content
On this page

Accordion

An accordion is a user interface component that allows the user to hide or reveal content.

Import

javascript
import { VAccordion } from 'vuetify'

Usage

Label

html
<v-accordion> Lorem ipsum </v-accordion>

Accordion with nested #header slot

Different Label

html
<v-accordion>
  <template #header> Different Label </template>
  Lorem ipsum
</v-accordion>

Accordion with label prop

Another Label

html
<v-accordion label="Another Label">Lorem ipsum dolor sit amet.</v-accordion>

Accordion without background

Label

html
<v-accordion :bg="false">Lorem ipsum </v-accordion>