> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/accordions.md).

# Accordions

{% hint style="info" icon="figma" %}
Noms des composants : **accordionMain**, **accordionRdv**
{% endhint %}

***

{% tabs %}
{% tab title="Main" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-949&page-id=1:948&scaling=min-zoom&starting-point-node-id=1:949&t=8pdWCqYKUCUbQsnv-1>" %}
{% endtab %}

{% tab title="Rdv" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=7341-2940&page-id=1:948&scaling=min-zoom&starting-point-node-id=1:949&t=KJMxop50Y6QodUJD-1&viewport=144,356,0.77>" %}
{% endtab %}
{% endtabs %}

***

### Principes

#### Économie d'attention

Il doit être utilisé pour hiérarchiser l'information : le titre doit être explicite pour que l'utilisateur n'ouvre que le contenu dont il a réellement besoin (ex: FAQ ou détails techniques).

#### Indicateur

La présence d'un chevron est indispensable pour signaler le caractère dépliable. Sa rotation doit accompagner l'animation d'ouverture pour confirmer l'action.

***

### Usage

L'accordéon est utilisé principalement en liste empilée verticalement. L'accordéon RDV est utilisé principalement dans le tunnel d'achat pour choisir un créneau de livraison.

***

### À faire, ne pas faire

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser un dépliant pour cacher complètement un contenu.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Utiliser un dépliant pour cacher partiellement un contenu, en injectant un "voir plus" ou un "Extend" à l'intérieur du dépliant.</td></tr></tbody></table>

***

### Composant lié

{% content-ref url="/pages/MrW9oizKn6mG53ibrn74" %}
[Toggle choix](/documentation/components/choice.md)
{% endcontent-ref %}