# Accordion (/fr/components/accordions)
Related: [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md), [Couleur](/fr/components/color.md)
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.
## Accordéon simple [#accordéon-simple]
Vous pouvez placer n’importe quel contenu ici, y compris d’autres composants, comme du code :
```java title="HelloWorld.java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
````mdx title="Accordion example"
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 !");
}
}
```
````
## Groupes d’Accordion [#groupes-daccordion]
Regroupez les Accordions liés avec ``. Cela crée une section cohérente d’Accordions pouvant être développés ou réduits individuellement.
Vous pouvez placer d’autres composants à l’intérieur des Accordions.
```java title="HelloWorld.java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
Ajoutez des icons pour rendre les Accordions plus visibles et faciles à parcourir d’un coup d’œil.
Gardez le contenu connexe organisé en groupes.
````mdx title="Accordion Group Example"
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 !");
}
}
```
Ajoutez des icônes pour rendre les accordéons plus visuellement distincts et faciles à parcourir.
Organisez le contenu connexe en groupes.
````
## Propriétés [#propriétés]
Titre dans l’aperçu de l’Accordion.
Détails sous le titre dans l’aperçu de l’Accordion.
Indique si l’Accordion est ouvert par défaut.
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`.
L’icône à afficher.
Options:
* [Font Awesome](https://fontawesome.com/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `fontawesome` dans votre `docs.json`
* [Lucide](https://lucide.dev/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `lucide` dans votre `docs.json`
* [Tabler](https://tabler.io/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `tabler` dans votre `docs.json`
* URL vers une icône hébergée en externe
* Chemin vers un fichier d’icône dans votre projet
* Code SVG entouré d’accolades
Pour les icônes SVG personnalisées:
1. Convertissez votre SVG avec le [convertisseur SVGR](https://react-svgr.com/playground/).
2. Collez votre code SVG dans le champ d’entrée SVG.
3. Copiez l’élément complet `` depuis le champ de sortie JSX.
4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={}`.
5. Ajustez `height` et `width` selon vos besoins.
Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.
Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.