Listes et contenu

Accordéon et séparateur

nouveauClasses hb-details hb-details-body hb-dividerVuetify 2 v-expansion-panels + v-expansion-panelVuetify 3 v-expansion-panels

Quand l'utiliser

Pour un détail que la plupart des lecteurs n'ouvrent pas : lignes d'un bon, historique, options avancées. Si le contenu est nécessaire pour agir, il reste visible. Pour naviguer entre des vues de même importance, des onglets.

Détail du bon de livraison 12

12 lignes, 2 écarts de poids signalés, total 1 284,60 € HT.

Écarts de prix 2

Saumon entier : 12,40 → 13,10 €/kg. Crevettes cuites : 9,80 → 10,20 €/kg.

Historique 3 événements

Créé le 05/11/2026 par A. Nguyen.

Code

<div style="max-width:560px">
  <details class="hb-details" open><summary>Détail du bon de livraison <span class="hb-count">12</span></summary><div class="hb-details-body hb-small">12 lignes, 2 écarts de poids signalés, total 1 284,60 € HT.</div></details>
  <details class="hb-details"><summary>Écarts de prix <span class="hb-badge hb-badge-warning">2</span></summary><div class="hb-details-body hb-small">Saumon entier : 12,40 → 13,10 €/kg. Crevettes cuites : 9,80 → 10,20 €/kg.</div></details>
  <details class="hb-details"><summary>Historique <span class="hb-small">3 événements</span></summary><div class="hb-details-body hb-small">Créé le 05/11/2026 par A. Nguyen.</div></details>
  <div class="hb-divider">ou</div>
  <div class="hb-divider"></div>
</div>

Règles

Le titre de l'accordéon dit ce qu'il contient et, à droite, combien (compte, badge) : on sait s'il vaut la peine d'ouvrir.
Un seul accordéon ouvert à la fois n'est pas imposé ; si l'écran le veut, l'application ferme les autres à l'ouverture (toggle).
C'est un <details> natif : clavier, lecteur d'écran et impression (tout ouvert) fonctionnent sans script.