Accordéons

Pour générer des tabs et des accordions dans une page statique, il suffit d'insérer la bonne structure HTML, les scripts JS étant déjà chargés dans le layout.tsx.

Tabs

<div className="tabs" role="tablist" aria-label="Sample Tabs">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="panel1"
    id="tab1"
    tabindex="{0}"
  >
    Tab 1
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel2"
    id="tab2"
    tabindex="{-1}"
  >
    Tab 2
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel3"
    id="tab3"
    tabindex="{-1}"
  >
    Tab 3
  </button>
</div>

<div className="tab-panels">
  <div className="tab-panel" role="tabpanel" id="panel1" aria-labelledby="tab1">
    Contenu du panel 1
  </div>
  <div
    className="tab-panel"
    role="tabpanel"
    id="panel2"
    aria-labelledby="tab1"
    hidden
  >
    Contenu du panel 2
  </div>
  <div
    className="tab-panel"
    role="tabpanel"
    id="panel3"
    aria-labelledby="tab3"
    hidden
  >
    Contenu du panel 3
  </div>
</div>

Il faut noter la présence de l'attribut hidden sur les panels masqués par défaut.

Accordions

Pour générer un accordion, il suffit de respecter le markup html suivant :

<button className="accordion">Titre</button>
<div className="panel">
  <div className="panel-content">Contenu</div>
</div>