mintlify__docs/fr/components/accordions.mdx

---
title: "Accordion"
description: "Utilisez des accordions pour afficher et masquer du contenu."
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.


<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>

<IconsOptional />