mintlify__docs/fr/components/accordions.mdx

---
title: "Accordion"
description: "Utilisez le composant accordion pour afficher et masquer des sections de contenu, organiser les informations connexes et activer la divulgation progressive dans vos docs."
keywords: ["accordions", "collapsible content", "expandable sections", "progressive disclosure"]
---

import IconsOptional from "/snippets/fr/icons-optional.mdx";

Les Accordion permettent aux utilisateurs d’ouvrir et de replier des sections de contenu. Utilisez des Accordion pour la divulgation progressive et pour organiser l’information.

Lorsque vous ouvrez un Accordion, le hash de l’URL se met à jour, ce qui vous permet de partager des liens directs vers des sections spécifiques de l’Accordion.

<div id="single-accordion">
  ## Accordéon simple
</div>

<Accordion title="Je suis un Accordion.">
  Vous pouvez placer n’importe quel contenu ici, y compris d’autres composants, comme du code :

  ```java HelloWorld.java
   class HelloWorld {
       public static void main(String[] args) {
           System.out.println("Hello, World!");
       }
   }
  ```
</Accordion>

````mdx Accordion example
<Accordion title="Je suis un Accordion.">
  Vous pouvez mettre n'importe quel contenu ici, y compris d'autres composants, comme du code :

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Bonjour, le monde !");
        }
    }
  ```
</Accordion>
````

<div id="accordion-groups">
  ## Groupes d’Accordion
</div>

Regroupez les Accordions liés avec `<AccordionGroup>`. Cela crée une section cohérente d’Accordions pouvant être développés ou réduits individuellement.

<AccordionGroup>
  <Accordion title="Pour commencer">
    Vous pouvez placer d’autres composants à l’intérieur des Accordions.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Fonctionnalités avancées" icon="bot">
    Ajoutez des icons pour rendre les Accordions plus visibles et faciles à parcourir d’un coup d’œil.
  </Accordion>

  <Accordion title="Dépannage">
    Gardez le contenu connexe organisé en groupes.
  </Accordion>
</AccordionGroup>

````mdx Accordion Group Example
<AccordionGroup>
  <Accordion title="Premiers pas">
    Vous pouvez placer d'autres composants à l'intérieur des Accordion.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Bonjour, le monde !");
        }
    }
    ```
  </Accordion>

  <Accordion title="Fonctionnalités avancées" icon="alien-8bit">
    Ajoutez des icônes pour rendre les accordéons plus visuellement distincts et faciles à parcourir.
  </Accordion>

  <Accordion title="Dépannage">
    Organisez le contenu connexe en groupes.
  </Accordion>
</AccordionGroup>
````


<div id="properties">
  ## Propriétés
</div>

<ResponseField name="title" type="string" required>
  Titre dans l’aperçu de l’Accordion.
</ResponseField>

<ResponseField name="description" type="string">
  Détails sous le titre dans l’aperçu de l’Accordion.
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">
  Indique si l’Accordion est ouvert par défaut.
</ResponseField>

<ResponseField name="id" type="string">
  ID personnalisé pour l’Accordion utilisé pour les liens d’ancrage. S’il est omis, la valeur par défaut est la même que `title`.
</ResponseField>

<IconsOptional />