---
title: "Accordion"
description: "Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”."
sidebar_label: "Accordion"
slug: /reference/components/accordion
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Accordion

Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `AccordionProps`  
**Story source:** [`demo/stories/Accordion.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Accordion.stories.tsx)

## Live demo

<ComponentDemo name="Accordion" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | Yes | The content to be displayed inside the accordion. |
| `title` | `string` | Yes | The title of the accordion. |
| `includeInfoModal` | `boolean` |  | If true, an information modal will be included. |
| `infoModalChildren` | `ReactElement` |  | The content of the information modal. |
| `infoModalSubtitle` | `string` |  | The subtitle of the information modal. |
| `infoModalText` | `string` |  | The text content of the information modal. |
| `infoModalTitle` | `string` |  | The title of the information modal. |
| `isCollapsed` | `boolean` |  | If true, the accordion will be collapsed. |
| `onToggle` | `reflection` |  | * Callback fired when the accordion is toggled. |
| `subtitle` | `string` |  |  |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |