---
title: Volet extensible
description: "Expandable crée une bascule afficher/masquer pour du contenu que les lecteurs peuvent vouloir consulter mais qui n'est pas essentiel au flux principal."
---

Utilisez Expandable pour masquer les réponses API verbeuses, les étapes de dépannage ou les détails supplémentaires qui interrompraient autrement le flux de lecture. Il se rend comme un seul élément de divulgation cliquable -- plus léger qu'Accordion, qui est conçu pour des sections groupées et navigables.

Utilisez Expandable lorsque :
- **Les détails supplémentaires** interrompraient le récit principal
- **Les informations optionnelles** bénéficient à certains lecteurs mais pas à tous
- **Le contenu long** (comme les réponses API complètes) doit être réduit par défaut

## Utilisation de base

<Expandable title="Afficher plus de détails">
  Ces détails sont masqués par défaut et révélés au clic.
</Expandable>

```mdx
<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>
```

## Ouvert par défaut

Commencer développé :

<Expandable title="Développé par défaut" defaultOpen>
  Cette section commence visible.
</Expandable>

```mdx
<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>
```

## Cas d'utilisation courants

### Détails de réponse API

Réduire les réponses verbeuses qui interrompraient autrement le flux de documentation :

<Expandable title="Voir la réponse complète">
```json
{
  "id": "123",
  "name": "Example",
  "metadata": {
    "created": "2024-01-01",
    "updated": "2024-01-15"
  }
}
```
</Expandable>

### Étapes de dépannage

<Expandable title="Vous avez des problèmes de connexion ?">
  1. Vérifiez votre connexion réseau
  2. Vérifiez que l'endpoint API est correct
  3. Assurez-vous que votre clé API est valide
</Expandable>

## Props

<ParamField name="title" type="string" required>
  Texte d'en-tête de section.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Commencer développé.
</ParamField>

## Expandable vs Accordion

| Fonctionnalité | Expandable | Accordion |
|----------------|------------|-----------|
| Objectif | Masquer du contenu supplémentaire | Organiser des sections d'égale importance |
| Icônes | Non | Oui |
| Descriptions | Non | Oui (support de sous-titre) |
| Groupement | Autonome | Peut être groupé avec AccordionGroup |
| Idéal pour | Détails optionnels, longs exemples | FAQ, listes de fonctionnalités, navigation |

**Règle générale :** Si le contenu est "agréable à avoir", utilisez Expandable. Si les utilisateurs doivent choisir entre des sections, utilisez Accordion.

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants dans MDX
  </Card>
</Columns>