React Components

# Accordion

_An **Accordion** is a vertical header that reveals or hides an associated section of content._

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.

## Overview

---

The **Accordion** component delivers large amounts of content in a small space through progressive disclosure.

The header part gives the user a high-level overview of the content allowing them to decide which sections to read.

**Accordions** can make information processing and discovering more effective. However, it does hide content from the users, and it's important to account for a user not noticing or reading all the included content. If a user is likely to read all the content then then the usage of an **Accordion** would not be recommended as it adds an extra interaction to access the content; instead use a full scrolling page with normal headers.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Accordion</td></tr><tr><th scope="row">Also known as</th><td>Collapsible, FAQ</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=1-6634" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/accordion" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-accordion--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

Use any number of elements to visually display them as a group. Several collapsible panels can co-exist in a same interface.

Use this component for :

-   Organizing related information
-   Shortening pages and reducing scrolling when content is not crucial to read in full
-   When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use Accordion to progressively disclose content, especially in long or dense pages |
| - Ensure the summary/title of each Accordion clearly communicates what it contains |
| - Use Accordions to group related content (e.g., FAQ) |
| - Keep the content within each panel concise and scannable |
| - Use Accordion instead of Tab if users need to see multiple sections at once |

| ❌ Don't |
| --- |
| - Don't nest Accordions inside each other |
| - Don't use Accordion to hide critical information needed for completing a task |
| - Don't use vague or generic titles like "Section 1", they should be descriptive |
| - Don't expose a lot of content in the title |

### Best Practices in Context

1.  **Accordion**
2.  **Header**
3.  **Panel**

## Placement

---

The **Accordion** component is adjusted to the parent's width. It can vary based on the content, layout, and page design.

By default, the **Accordion** content is left-aligned in its container, as the header does.

It can be placed within main page content or inside a side container (as panels, or tiles).

## Behavior

---

An **Accordion** can be hovered, focused, clicked and disabled.

**Accordion** has two states : collapsed and expanded. It is collapsed by default.

When triggering the header part, the panel part should react as expanding or collapsing, depending on what previous state it had.

The mouse cursor acts as a clickable area on the Header part of the component.

The **Icon** helps the user to know if the **Accordion** is collapsed or expanded :

-   Collapsed : chevron points right
-   Expanded : chevron points down

The Header part of this component acts like a button, with hover, focus and active styles.

Same behavior and styling applies to both Desktop and Mobile modes.

## Navigation

---

### Focus Management

The **Accordion** header can receive keyboard focus and is part of the standard tab order.

Focus remains on the header after toggling the section.

If the **Accordion** is disabled, it does not receive focus and cannot be activated via keyboard.

### General Keyboard Shortcuts

Pressing Enter or Space on a focused **Accordion** header toggles its expansion or collapse.

Pressing Escape does not close an expanded **Accordion** section (unless additional custom behavior is implemented).

### Navigation between sections

If multiple **Accordions** exist, users can navigate between headers using the Tab key.

There is no looping between headers: pressing Tab on the last header moves focus to the next interactive element outside the Accordion.

Arrow keys (Arrow Up / Arrow Down) do not move between **Accordions** by default.

## Accessibility

---

This component complies with the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion) .