# Details

Un passage fermé que la personne ouvre si elle le souhaite : des explications et des paramètres dont la plupart des gens n'ont pas besoin.

## Playground

```html
<details class="feitio-details"><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Qu’est-ce que le fuseau horaire ?</summary><div class="content"><p>C’est l’heure locale que le produit utilise pour envoyer les rappels.</p></div></details>
```

## Quand l'utiliser

-   Pour l'aide, seuls certains en ont besoin (« Quelle est la zone horaire ? »).
-   Pour les paramètres avancés, presque personne ne les modifie.

## Quand ne pas l'utiliser

-   **Ce que tout le monde doit lire :** laissez-le ouvert.
-   **Cacher un champ requis.**
-   **Plusieurs en rangée, comme un accordéon :** si tout est fermé, rien ne sera lu.

## Exemples

### Une question

Le contenu grandit et la flèche tourne sur la courbe de changement.

Afficher le code

```html
<details class="feitio-details">
  <summary><svg class="feitio-icon" aria-hidden="true">…</svg>O que é o fuso horário?</summary>
  <div class="content"><p>…</p></div>
</details>
```

## Anatomie

1.  **Flèche :** descend quand elle s'ouvre.
2.  **Résumé :** une question ou un nom, souligné comme un lien.
3.  **Contenu :** aligné avec le texte du résumé.

## Écriture

-   Le résumé indique ce qui se trouve à l'intérieur. Jamais "En savoir plus".

## Accessibilité

-   C'est le `<details>` du navigateur : il s'ouvre avec le clavier et les lecteurs d'écran indiquent s'il est ouvert ou non.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-details"`

sur le `<details>`

La flèche tournante et le résumé souligné.

`class="content"`

autour du contenu

Aligné avec le résumé.

`open`

optionnel

Début ouvert.