+ Import
+
+import Accordion from 'primevue/accordion';
+
+
+ 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 active property that supports one or two-way binding.
+
+<Accordion>
+ <AccordionTab header="Header I" :active="true">
+ 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 can be placed at an accordion header with header element.
+
+<Accordion>
+ <AccordionTab>
+ <template slot="header">
+ <i class="pi pi-calendar"></i>
+ <span>Header I</span>
+ </template>
+ Content
+ </AccordionTab>
+ <AccordionTab>
+ <template slot="header">
+ <i class="pi pi-calendar"></i>
+ <span>Header II</span>
+ </template>
+ Content
+ </AccordionTab>
+ <AccordionTab>
+ <template slot="header">
+ <i class="pi pi-calendar"></i>
+ <span>Header III</span>
+ </template>
+ Content
+ </AccordionTab>
+</Accordion>
+
+
+ Programmatic Control
+ Tabs can be controlled programmatically using active property.
+
+<div>
+ <Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
+ <Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
+ <Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
+</div>
+
+<Accordion :multiple="true">
+ <AccordionTab header="Header I" :active="active1">
+ Content
+ </AccordionTab>
+ <AccordionTab header="Header II" :active="active2">
+ Content
+ </AccordionTab>
+ <AccordionTab header="Header III" :active="active3">
+ Content
+ </AccordionTab>
+</Accordion>
+
+
+
+export default {
+ data() {
+ return {
+ active1: true,
+ active2: false,
+ active3: false
+ }
+ }
+}
+
+
+ Properties For AccordionTab
+
+
+
+
+ Name |
+ Type |
+ Default |
+ Description |
+
+
+
+
+ header |
+ string |
+ null |
+ Orientation of tab headers. |
+
+
+ active |
+ boolean |
+ null |
+ Visibility of the content. |
+
+
+ disabled |
+ boolean |
+ false |
+ Whether the tab is disabled. |
+
+
+
+
+
+ Properties
+
+
+
+
+ Name |
+ Type |
+ Default |
+ Description |
+
+
+
+
+ multiple |
+ boolean |
+ false |
+ When enabled, multiple tabs can be activated at the same time. |
+
+
+
+
+
+ Events
+
+
+
+
+ Name |
+ Parameters |
+ Description |
+
+
+
+
+ tabOpen |
+ event.originalEvent: browser event
+ event.tab: Opened tab
+ |
+ Callback to invoke when a tab gets expanded. |
+
+
+ tabClose |
+ event.originalEvent: browser event
+ event.tab: Closed tab
+ |
+ Callback to invoke when an active tab is collapsed by clicking on the header. |
+
+
+
+
+
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name |
+ Element |
+
+
+
+
+ p-accordion |
+ Container element. |
+
+
+ p-accordion-header |
+ Header of a tab. |
+
+
+ p-accordion-content |
+ Container of a tab. |
+
+
+
+
+
+ Dependencies
+ None.
+
+
+