Vue3 Accordion

Vue3 Accordion groups a collection of contents in tabs. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';

Getting Started

Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.

<Accordion>
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III">
        Content
    </AccordionTab>
</Accordion>

Active

Visibility of the content is specified with the activeIndex property that supports one or two-way binding.

<Accordion :activeIndex="0">
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III">
        Content
    </AccordionTab>
</Accordion>

Two-way binding requires v-model.

<Accordion v-model:activeIndex="activeIndex">
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III">
        Content
    </AccordionTab>
</Accordion>

Multiple

By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.

<Accordion :multiple="true">
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III">
        Content
    </AccordionTab>
</Accordion>

Disabled

A tab can be disabled by setting the disabled property to true.

<Accordion>
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III" :disabled="true">
        Content
    </AccordionTab>
</Accordion>

Custom Content at Headers

Custom content for the title section of a panel is defined using the header template.

<Accordion>
    <AccordionTab>
        <template #header>
            <i class="pi pi-calendar"></i>
            <span>Header I</span>
        </template>
        Content
    </AccordionTab>
    <AccordionTab>
        <template #header>
            <i class="pi pi-calendar"></i>
            <span>Header II</span>
        </template>
        Content
    </AccordionTab>
    <AccordionTab>
        <template #header>
            <i class="pi pi-calendar"></i>
            <span>Header III</span>
        </template>
        Content
    </AccordionTab>
</Accordion>

Programmatic Control

Tabs can be controlled programmatically using activeIndex property.

<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />

<Accordion :multiple="true" :activeIdex="active">
    <AccordionTab header="Header I">
        Content
    </AccordionTab>
    <AccordionTab header="Header II">
        Content
    </AccordionTab>
    <AccordionTab header="Header III">
        Content
    </AccordionTab>
</Accordion>

export default {
    data() {
        return {
            active: 0
        }
    }
}

Dynamic Tabs

Tabs can be generated dynamically using the standard v-for directive.

<Accordion>
    <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
        <p>{{tab.content}}</p>
    </AccordionTab>
</Accordion>

export default {
    data() {
        return {
            tabs: [
                {title: 'Title 1', content: 'Content 1'},
                {title: 'Title 3', content: 'Content 2'},
                {title: 'Title 3', content: 'Content 3'}
            ]
        }
    }
}

Theming

Accordion supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Accordion showcase for demos and documentation.