React Accordion

React Accordion groups a collection of contents in tabs.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

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

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={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: 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>

Theming

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

Resources

Visit the PrimeReact Accordion showcase for demos and documentation.