Accordion

L’accordéon TDS habille les éléments HTML natifs <details>/<summary> — aucune ligne de JavaScript n’est nécessaire pour l’ouverture/fermeture, la sémantique et l’accessibilité de base (clavier, lecteurs d’écran) sont gérées nativement par le navigateur.

Do / Don’t

✓ Faire

Utiliser pour des FAQ, des sections optionnelles de détail
Garder les titres de section (<summary>) courts et explicites

✗ Éviter

Cacher des champs de formulaire obligatoires dans un accordéon fermé
Réimplémenter l’ouverture/fermeture en JavaScript — <details> le fait déjà nativement

Chevron tds-accordion__icon pivote à 180° à l’ouverture ([open] .tds-accordion__icon). Item ouvert par défaut via l’attribut HTML open, jamais forcé en CSS.

Importation

@import "@tds-tchad/core/components/accordion/accordion.css";

import { accordion } from '@tds-tchad/core/components/accordion';

Exemple

<div class="tds-accordion">
  <details class="tds-accordion__item" open>
    <summary class="tds-accordion__trigger">
      Quels documents sont nécessaires ?
      <svg class="tds-accordion__icon" aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 6l4 4 4-4" />
      </svg>
    </summary>
    <div class="tds-accordion__content">
      Carte d'identité, justificatif de domicile de moins de 3 mois, et photo d'identité récente.
    </div>
  </details>
  <details class="tds-accordion__item">
    <summary class="tds-accordion__trigger">
      Quel est le délai de traitement ?
      <svg class="tds-accordion__icon" aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 6l4 4 4-4" />
      </svg>
    </summary>
    <div class="tds-accordion__content">
      Le traitement standard prend entre 5 et 10 jours ouvrés.
    </div>
  </details>
</div>