Accordion

Accordion groups a collection of contents in tabs.

Default

Multiple

Programmatic

Custom Headers

Import via Module


import { Accordion, AccordionTab } from 'primereact/accordion';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/accordion/accordion.min.js"></script>

Getting Started

Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.

Controlled Component

In controlled mode, activeIndex and onTabChange properties need to be defined to control the state.


<Accordion activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
    <AccordionTab header="Header I">
        Content I
    </AccordionTab>
    <AccordionTab header="Header II">
        Content II
    </AccordionTab>
    <AccordionTab header="Header III">
        Content III
    </AccordionTab>
</Accordion>

Uncontrolled

In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the active tab, prefer to use the component as controlled.


<Accordion>
    <AccordionTab header="Header I">
        Content I
    </AccordionTab>
    <AccordionTab header="Header II">
        Content II
    </AccordionTab>
    <AccordionTab header="Header III">
        Content III
    </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>
    <AccordionTab header="Header I">
        Content I
    </AccordionTab>
    <AccordionTab header="Header II">
        Content II
    </AccordionTab>
    <AccordionTab header="Header III">
        Content III
    </AccordionTab>
</Accordion>

Properties For AccordionTab

Name	Type	Default	Description
header	string	null	Orientation of tab headers.
disabled	boolean	false	Whether the tab is disabled.
style	object	null	Inline style of the tab header and content.
className	string	null	Style class of the tab header and content.
headerStyle	object	null	Inline style of the tab header.
headerClassName	string	null	Style class of the tab header.
headerTemplate	any	null	Template of the tab header.
contentStyle	object	null	Inline style of the tab content.
contentClassName	string	null	Style class of the tab content.
tabIndex	number	null	Index of the element in tabbing order.

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
activeIndex	any	null	Active index or indexes of the element. Use an array of numbers for multiple indexes. the "multiple" prop must be set to true in order to specify multiple indexes.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
multiple	boolean	false	When enabled, multiple tabs can be activated at the same time.
expandIcon	string	pi pi-chevron-right	Icon of a collapsed tab.
collapseIcon	string	pi pi-chevron-down	Icon of an expanded tab.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onTabOpen	event.originalEvent: browser event event.index: Index or indexes of the tab (number or array of numbers).	Callback to invoke when a tab gets expanded.
onTabClose	event.originalEvent: browser event event.index: Index of the tab	Callback to invoke when an active tab is collapsed by clicking on the header.
onTabChange	event.originalEvent: browser event event.index: Index of the tab	Callback to invoke when state of the accordion changes.