import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"></script>
<script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"></script>
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>
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>
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>
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 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>
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" :activeIndex="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
}
}
}
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'}
]
}
}
}
All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling lazy option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial rendering performance if there are many tabs.
<Accordion lazy>
<AccordionTab header="Header I">
Content
</AccordionTab>
<AccordionTab header="Header II">
Content
</AccordionTab>
<AccordionTab header="Header III">
Content
</AccordionTab>
</Accordion>
| Name | Type | Default | Description |
|---|---|---|---|
| header | string | null | Orientation of tab headers. |
| headerStyle | string | null | Inline style of the tab header. |
| headerClass | string | null | Style class of the tab header. |
| headerProps | object | null | Uses to pass all properties of the HTMLDivElement to the tab header. |
| headerActionProps | object | null | Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header. |
| contentStyle | string | null | Inline style of the tab content. |
| contentClass | string | null | Style class of the tab content. |
| contentProps | object | null | Uses to pass all properties of the HTMLDivElement to the tab content. |
| disabled | boolean | false | Whether the tab is disabled. |
Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | When enabled, multiple tabs can be activated at the same time. |
| activeIndex | number|array | null | Index of the active tab or an array of indexes in multiple mode. |
| lazy | boolean | false | When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css. |
| expandIcon | string | pi-chevron-right | Icon of a collapsed tab. |
| collapseIcon | string | pi-chevron-down | Icon of an expanded tab. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| selectOnFocus | boolean | false | When enabled, the focused tab is activated. |
| Name | Parameters | Description |
|---|---|---|
| tab-open |
event.originalEvent: Browser event event.index: Opened tab index |
Callback to invoke when a tab gets expanded. |
| tab-close |
event.originalEvent: Browser event event.index: Closed tab index |
Callback to invoke when an active tab is collapsed by clicking on the header. |
| tab-click |
event.originalEvent: Browser event event.index: Index of the clicked tab |
Callback to invoke when an active tab is clicked. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-accordion | Container element. |
| p-accordion-header | Header of a tab. |
| p-accordion-content | Container of a tab. |
Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerActionProps property.
The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
| Key | Function |
|---|---|
| tab | Moves focus to the next focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous focusable element in the page tab sequence. |
| enter | Toggles the visibility of the content. |
| space | Toggles the visibility of the content. |
| down arrow | Moves focus to the next header. If focus is on the last header, moves focus to the first header. |
| up arrow | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
| home | Moves focus to the first header. |
| end | Moves focus to the last header. |
None.