DEV Community

loading...
Cover image for Angular Accordion

Angular Accordion

primetek profile image PrimeTek ・4 min read

Angular Accordion groups a collection of contents in tabs.

Setup

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

Import

import {AccordionModule} from 'primeng/accordion';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Accordion element consists of one or more p-accordionTab elements. Title of the tab is defined using header attribute.

<p-accordion>
    <p-accordionTab header="Header 1">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode

Selected

Visibility of the content is specified with the selected property that supports one or two-way binding.

<p-accordion>
    <p-accordionTab header="Header 1" [selected]="true">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode

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.

<p-accordion [multiple]="true">
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode

Disabled

A tab can be disabled by setting the disabled property to true.

<p-accordion>
    <p-accordionTab header="Header 1" [disabled]="true">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode

Custom Content at Headers

Custom content can be placed at an accordion header with header template.

<p-accordionTab>
    <ng-template pTemplate="header">Header Content</ng-template>
    <ng-template pTemplate="content">Body Content</ng-template>
</p-accordionTab>
Enter fullscreen mode Exit fullscreen mode

Programmatic Control

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

<h5>Programmatic</h5>
<div class="p-py-3">
    <p-button [icon]="activeState[0] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(0)" styleClass="p-button-text" label="Toggle 1st"></p-button>
    <p-button [icon]="activeState[1] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(1)" styleClass="p-button-text p-ml-2" label="Toggle 2st"></p-button>
    <p-button [icon]="activeState[2] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(2)" styleClass="p-button-text p-ml-2" label="Toggle 3st"></p-button>
</div>

<p-accordion>
    <p-accordionTab header="Header I" [(selected)]="activeState[0]">
        <p>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-accordionTab>
    <p-accordionTab header="Header II" [(selected)]="activeState[1]">
        <p>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-accordionTab>
    <p-accordionTab header="Header III" [(selected)]="activeState[2]">
        <p>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-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode
export class AccordionDemo {

    activeState: boolean[] = [true, false, false];

    toggle(index: number) {
        this.activeState[index] = !this.activeState[index];
    }
}
Enter fullscreen mode Exit fullscreen mode

Lazy Loading

Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy loaded accordionTab contents are cached by default so that upon reselection, they are not created again. You may use cache property on AccordionTab to configure this behavior. A AccordionTab is specified as lazy when there is a ngTemplate with pTemplate="content" in it.

<p-accordion>
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-accordionTab>
</p-accordion>
Enter fullscreen mode Exit fullscreen mode
export class AccordionDemo {

    index: number = 0;

    openNext() {
        this.index = (this.index === 2) ? 0 : this.index + 1;
    }

    openPrev() {
        this.index = (this.index === 0) ? 2 : this.index - 1;
    }
}
Enter fullscreen mode Exit fullscreen mode

Animation Configuration

Transition of the toggle animation can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.86, 0, 0.07, 1), example below disables the animation altogether.

<p-accordionTab [transitionOptions]="'0ms'" header="Header 1">
    Content
</p-accordionTab>
Enter fullscreen mode Exit fullscreen mode

Theming

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

Resources

Visit the PrimeNG Accordion showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app