Accordion

A content area which can be collapsed and expanded.

Basic Usage

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

<prism-accordion>
  <prism-accordion-panel header="This is panel header 1">
    <p>A dog is a type of domesticated animal.</p>
  </prism-accordion-panel>
  <prism-accordion-panel header="This is panel header 2">
    <p>A dog is a type of domesticated animal.</p>
  </prism-accordion-panel>
</prism-accordion>

Accordion Mode

Content 1

<prism-accordion [accordion]="true">
  <prism-accordion-panel header="Only one panel open at a time" [active]="true">
    <p>Panel 1</p>
  </prism-accordion-panel>
  <prism-accordion-panel header="Opening this will close the first one">
    <p>Panel 2</p>
  </prism-accordion-panel>
</prism-accordion>

Custom Header & Extra

<prism-accordion-panel [header]="customHeader" [extra]="extraContent">
  <p>Panel content...</p>
</prism-accordion-panel>

<ng-template #customHeader>
  <span class="flex items-center gap-2">
    <i class="ri-settings-line"></i>
    Custom Header with Template
  </span>
</ng-template>

<ng-template #extraContent>
    <prism-badge status="success" text="New" />
</ng-template>

Borderless

Content of panel 1

NameTypeDefaultDescription
accordionbooleanfalseWhether to allow only one panel to be active at a time.
borderedbooleantrueWhether to show borders around the accordion.
expandIconPosition'start' | 'end''start'Position of the expansion icon.

Name	Type	Default	Description
`accordion`	`boolean`	`false`	Whether to allow only one panel to be active at a time.
`bordered`	`boolean`	`true`	Whether to show borders around the accordion.
`expandIconPosition`	`'start' \| 'end'`	`'start'`	Position of the expansion icon.