Accordion

Accordion groups a collection of contents in tabs.

Import #


import { AccordionModule } from 'primeng/accordion';

Basic #

Accordion consists of one or more AccordionTab elements which are collapsed by default. Tab to expand initially can be defined with the activeIndex property.

Header I

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header II

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Header III

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.


<p-accordion [activeIndex]="0">
    <p-accordionTab header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-accordionTab>
</p-accordion>

Dynamic #

AccordionTabs can be generated dynamically using the standard ngFor directive.

Title 1

Content 1

Title 2

Title 3


<p-accordion [activeIndex]="0">
    <p-accordionTab [header]="tab.title" *ngFor="let tab of tabs">
        <p class="m-0">
            {{ tab.content }}
        </p>
    </p-accordionTab>
</p-accordion>

Multiple #

Only one tab at a time can be active by default, enabling multiple property changes this behavior to allow multiple tabs. In this case activeIndex needs to be an array.

Header I

Header II

Header III


<p-accordion [multiple]="true" [activeIndex]="[0]">
    <p-accordionTab header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-accordionTab>
</p-accordion>

Disabled #

Enabling disabled property of an AccordionTab prevents user interaction.


<p-accordion [activeIndex]="0">
    <p-accordionTab header="Header I">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header II">
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header III">
        <p>
            At vero eos et accusamus et iusto odio dignissimos...
        </p>
    </p-accordionTab>
    <p-accordionTab header="Header IV" [disabled]="true" />
</p-accordion>

Controlled #

Tabs can be controlled programmatically using the activeIndex property of the accordion in general or the selected property of p-accordionTab individually.

Header I

Header II

Header III


<div class="flex mb-3 gap-2 justify-content-end">
    <p-button 
        (click)="activeIndex = 0" 
        rounded="true" 
        label="1" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 0" />
    <p-button 
        (click)="activeIndex = 1" 
        rounded="true" 
        label="2" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 1" />
    <p-button 
        (click)="activeIndex = 2" 
        rounded="true" 
        label="3" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="activeIndex !== 2" />
    </div>
    <p-accordion (activeIndexChange)="activeIndexChange($event)" [activeIndex]="activeIndex">
        <p-accordionTab header="Header I">
            <p class="m-0">
                Lorem ipsum dolor sit amet...
            </p>
        </p-accordionTab>
        <p-accordionTab header="Header II">
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
            </p>
        </p-accordionTab>
        <p-accordionTab header="Header III">
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos...
            </p>
        </p-accordionTab>
    </p-accordion>

Template #

AccordionTab is customized header and content templates.

Amy Elsner

Onyama Limba

Ioni Bowcher


<p-accordion class="w-full" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
        <p-accordionTab>
            <ng-template pTemplate="header">
                <span class="flex align-items-center gap-2 w-full">
                    <p-avatar 
                        image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
                        shape="circle" />
                    <span class="font-bold white-space-nowrap">
                        Amy Elsner
                    </span>
                    <p-badge value="3" class="ml-auto mr-2" />
                </span>
            </ng-template>
            <p class="m-0">
                Lorem ipsum dolor sit amet...
            </p>
        </p-accordionTab>
        <p-accordionTab>
            <ng-template pTemplate="header">
                <span class="flex align-items-center gap-2 w-full">
                    <p-avatar 
                        image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
                        shape="circle" />
                    <span class="font-bold white-space-nowrap">
                        Onyama Limba
                    </span>
                    <p-badge value="4" class="ml-auto mr-2" />
                </span>
            </ng-template>
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
            </p>
        </p-accordionTab>
        <p-accordionTab>
            <ng-template pTemplate="header">
                <span class="flex align-items-center gap-2 w-full">
                    <p-avatar 
                        image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" 
                        shape="circle" />
                    <span class="font-bold white-space-nowrap">
                        Ioni Bowcher
                    </span>
                    <p-badge value="2" class="ml-auto mr-2" />
                </span>
            </ng-template>
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos...
            </p>
        </p-accordionTab>
</p-accordion>

Style #

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	Content of a tab.

Accessibility #

Screen Reader

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 property. Each header has a heading role, for which the level is customized by headerAriaLevel and has a default level of 2 as per W3C specifications.

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.

Header Keyboard Support

Key	Function
tab	Moves focus to the next the focusable element in the page tab sequence.
shift + tab	Moves focus to the previous the 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.
up arrow	Moves focus to the previous header.
home	Moves focus to the first header.
end	Moves focus to the last header.

Accordion API

API defines helper props, events and others for the PrimeNG Accordion module.

Accordion #

Accordion groups a collection of contents in tabs.

Properties #

Defines the input properties of the component.

name	type	default	description
multiple	boolean	false	When enabled, multiple tabs can be activated at the same time.
style	Object	null	Inline style of the tab header and content.
styleClass	string	null	Class of the element.
expandIcon	string	null	Icon of a collapsed tab.
collapseIcon	string	null	Icon of an expanded tab.
activeIndex	number \| number[]	null	Index of the active tab or an array of indexes in multiple mode.
selectOnFocus	boolean	false	When enabled, the focused tab is activated.
headerAriaLevel	number	null	The aria-level that each accordion header will have. The default value is 2 as per W3C specifications

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onClose	event : AccordionTabCloseEvent	Callback to invoke when an active tab is collapsed by clicking on the header.
onOpen	event : AccordionTabOpenEvent	Callback to invoke when a tab gets expanded.
activeIndexChange	value : number \| number	Returns the active index.

Templates #

Defines the templates used by the component.

name	parameters	description
content		Custom template of content.
header		Custom template of header.
icon	context : { $implicit: any, // Data of the selected. }	Custom template of icon.

Events #

Defines the custom events used by the component's emitters.

AccordionTabOpenEvent #

Custom tab open event.

name	type	description
originalEvent	Event	Browser event.
index	number	Opened tab index.

AccordionTabCloseEvent #

Custom tab close event.

name	type	description
originalEvent	Event	Browser event.
index	number	Opened tab index.

AccordionTab #

AccordionTab is a helper component for Accordion.

Properties #

Defines the input properties of the component.

name	type	default	description
id	string	null	Current id state as a string.
header	string	null	Used to define the header of the tab.
headerStyle	Object	null	Inline style of the tab header.
tabStyle	Object	null	Inline style of the tab.
contentStyle	Object	null	Inline style of the tab content.
tabStyleClass	string	null	Style class of the tab.
headerStyleClass	string	null	Style class of the tab header.
contentStyleClass	string	null	Style class of the tab content.
disabled	boolean	false	Whether the tab is disabled.
cache	boolean	true	Whether a lazy loaded panel should avoid getting loaded again on reselection.
transitionOptions	string	400ms cubic-bezier(0.86, 0, 0.07, 1)	Transition options of the animation.
iconPos	"end" \| "start"	start	Position of the icon.
selected	boolean	null	The value that returns the selection.
headerAriaLevel	number	2	The aria-level that each accordion header will have. The default value is 2 as per W3C specifications

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
selectedChange	value : boolean	Event triggered by changing the choice.