Accordion

Accordion groups a collection of contents in tabs.

Import #


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

Basic #

Accordion is defined using AccordionPanel, AccordionHeader and AccordionContent components. Each AccordionPanel must contain a unique value property to specify the active item.

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


<p-accordion value="0">
    <p-accordion-panel value="0">
        <p-accordion-header>Header I</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>

    <p-accordion-panel value="1">
        <p-accordion-header>Header II</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>

    <p-accordion-panel value="2">
        <p-accordion-header>Header III</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
</p-accordion>

Dynamic #

AccordionPanel can be generated dynamically using the standard @for block.

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3


<p-accordion [value]="0">
    @for (tab of tabs; track tab.title) {
        <p-accordion-panel [value]="tab.value">
            <p-accordion-header>{{ tab.title }}</p-accordion-header>
            <p-accordion-content>
                <p class="m-0">{{ tab.content }}</p>
            </p-accordion-content>
        </p-accordion-panel>
    }
</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

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 [value]="['0']" [multiple]="true">
    <p-accordion-panel value="0">
        <p-accordion-header>Header I</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="1">
        <p-accordion-header>Header II</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="2">
        <p-accordion-header>Header III</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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>
        </p-accordion-content>
    </p-accordion-panel>
</p-accordion>

Disabled #

Enabling disabled property of an AccordionTab prevents user interaction.

Header I

Header II

Header III

Header IV


<p-accordion [value]="['0']" [multiple]="true">
    <p-accordion-panel value="0">
        <p-accordion-header>Header I</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="1">
        <p-accordion-header>Header II</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="2">
        <p-accordion-header>Header III</p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="3" [disabled]="true">
        <p-accordion-header>Header IV</p-accordion-header>
    </p-accordion-panel>
</p-accordion>

Controlled #

Panels can be controlled programmatically using value property as a model.

Header I

Header II

Header III


<div class="flex mb-4 gap-2 justify-end">
        <p-button (onClick)="active = '0'" [rounded]="true" label="1" class="w-8 h-8 p-0" [outlined]="active !== '0'" />
        <p-button (onClick)="active = '1'" [rounded]="true" label="2" class="w-8 h-8 p-0" [outlined]="active !== '1'" />
        <p-button (onClick)="active = '2'" [rounded]="true" label="3" class="w-8 h-8 p-0" [outlined]="active !== '2'" />
    </div>

    <p-accordion [(value)]="active">
        <p-accordion-panel value="0">
            <p-accordion-header>Header I</p-accordion-header>
            <p-accordion-content>
                <p class="m-0">
                    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.
                </p>
            </p-accordion-content>
        </p-accordion-panel>
        <p-accordion-panel value="1">
            <p-accordion-header>Header II</p-accordion-header>
            <p-accordion-content>
                <p class="m-0">
                    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.
                </p>
            </p-accordion-content>
        </p-accordion-panel>
        <p-accordion-panel value="2">
            <p-accordion-header>Header III</p-accordion-header>
            <p-accordion-content>
                <p class="m-0">
                    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>
            </p-accordion-content>
        </p-accordion-panel>
    </p-accordion>

Template #

Accordion is customized with toggleicon template.

Amy Elsner

Onyama Limba

Ioni Bowcher


<p-accordion value="0">
    <p-accordion-panel value="0">
        <p-accordion-header>
            <ng-template #toggleicon let-active="active">
                @if (active) {
                    <i class="pi pi-minus"></i>
                } @else {
                    <i class="pi pi-plus"></i>
                }
            </ng-template>
            <span class="flex 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 whitespace-nowrap">Amy Elsner</span>
                <p-badge value="3" class="ml-auto mr-2" />
            </span>
        </p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="1">
        <p-accordion-header>
            <ng-template #toggleicon let-active="active">
                @if (active) {
                    <i class="pi pi-minus"></i>
                } @else {
                    <i class="pi pi-plus"></i>
                }
            </ng-template>
            <span class="flex 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 whitespace-nowrap">Onyama Limba</span>
                <p-badge value="4" class="ml-auto mr-2" />
            </span>
        </p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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.
            </p>
        </p-accordion-content>
    </p-accordion-panel>
    <p-accordion-panel value="2">
        <p-accordion-header>
            <ng-template #toggleicon let-active="active">
                @if (active) {
                    <i class="pi pi-minus"></i>
                } @else {
                    <i class="pi pi-plus"></i>
                }
            </ng-template>
            <span class="flex 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 whitespace-nowrap">Ioni Bowcher</span>
                <p-badge value="2" class="ml-auto mr-2" />
            </span>
        </p-accordion-header>
        <p-accordion-content>
            <p class="m-0">
                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>
        </p-accordion-content>
    </p-accordion-panel>
</p-accordion>

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.

name	type	default	description
value	ModelSignal<string \| number \| string[] \| number[]>	undefined	Value of the active tab.
multiple	InputSignalWithTransform<boolean, any>	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.
selectOnFocus	InputSignalWithTransform<boolean, any>	false	When enabled, the focused tab is activated.
activeIndex	number \| number[]	null	Index of the active tab or an array of indexes in multiple mode.
transitionOptions	string	400ms cubic-bezier(0.86, 0, 0.07, 1)	Transition options of the animation.
headerAriaLevel	number	null	The aria-level that each accordion header will have. The default value is 2 as per W3C specifications

name	parameters	description
activeIndexChange	value : number \| number	Returns the active index.
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.

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

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

name	type	default	description
value	ModelSignal<string \| number \| string[] \| number[]>	undefined	Value of the active tab.
disabled	InputSignalWithTransform<any, boolean>	false	Disables the tab when enabled.

Accordion

Import #

Basic #

Dynamic #

Multiple #

Disabled #

Controlled #

Template #

Accessibility #

Screen Reader

Header Keyboard Support

Accordion API

Accordion #

Properties #

Emitters #

Interfaces #

AccordionTabOpenEvent #

AccordionTabCloseEvent #

AccordionToggleIconTemplateContext #

AccordionPanel #

Properties #

AccordionHeader #

Templates #

Accordion Theming

CSS Classes #

Accordion Design Tokens #

class	description
p-accordion	Class name of the root element
p-accordioncontent	Class name of the content wrapper
p-accordioncontent-content	Class name of the content
p-accordionheader	Class name of the header
p-accordionheader-toggle-icon	Class name of the toggle icon
p-accordionpanel	Class name of the panel

token	variable	description
root.transitionDuration	--p-accordion-transition-duration	Transition duration of root
panel.borderWidth	--p-accordion-panel-border-width	Border width of panel
panel.borderColor	--p-accordion-panel-border-color	Border color of panel
header.color	--p-accordion-header-color	Color of header
header.hoverColor	--p-accordion-header-hover-color	Hover color of header
header.activeColor	--p-accordion-header-active-color	Active color of header
header.padding	--p-accordion-header-padding	Padding of header
header.fontWeight	--p-accordion-header-font-weight	Font weight of header
header.borderRadius	--p-accordion-header-border-radius	Border radius of header
header.borderWidth	--p-accordion-header-border-width	Border width of header
header.borderColor	--p-accordion-header-border-color	Border color of header
header.background	--p-accordion-header-background	Background of header
header.hoverBackground	--p-accordion-header-hover-background	Hover background of header
header.activeBackground	--p-accordion-header-active-background	Active background of header
header.activeHoverBackground	--p-accordion-header-active-hover-background	Active hover background of header
focusRing.width	--p-accordion-header-focus-ring-width	Focus ring width of header
focusRing.style	--p-accordion-header-focus-ring-style	Focus ring style of header
focusRing.color	--p-accordion-header-focus-ring-color	Focus ring color of header
focusRing.offset	--p-accordion-header-focus-ring-offset	Focus ring offset of header
focusRing.shadow	--p-accordion-header-focus-ring-shadow	Focus ring shadow of header
toggleIcon.color	--p-accordion-header-toggle-icon-color	Toggle icon color of header
toggleIcon.hoverColor	--p-accordion-header-toggle-icon-hover-color	Toggle icon hover color of header
toggleIcon.activeColor	--p-accordion-header-toggle-icon-active-color	Toggle icon active color of header
toggleIcon.activeHoverColor	--p-accordion-header-toggle-icon-active-hover-color	Toggle icon active hover color of header
first.topBorderRadius	--p-accordion-header-first-top-border-radius	First top border radius of header
first.borderWidth	--p-accordion-header-first-border-width	First border width of header
last.bottomBorderRadius	--p-accordion-header-last-bottom-border-radius	Last bottom border radius of header
last.activeBottomBorderRadius	--p-accordion-header-last-active-bottom-border-radius	Last active bottom border radius of header
content.borderWidth	--p-accordion-content-border-width	Border width of content
content.borderColor	--p-accordion-content-border-color	Border color of content
content.background	--p-accordion-content-background	Background of content
content.color	--p-accordion-content-color	Color of content
content.padding	--p-accordion-content-padding	Padding of content