Composant de contenu dépliable autonome. Un bouton déclencheur ouvre ou ferme un panneau via une animation fluide. Contrairement à l'accordion, le collapse est indépendant et ne gère pas de logique de groupe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, consectetur culpa cumque debitis dolorum fugiat iste, iusto magnam mollitia nam numquam obcaecati praesentium quae quos reiciendis similique tempora voluptatum ?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, consectetur culpa cumque debitis dolorum fugiat iste, iusto magnam mollitia nam numquam obcaecati praesentium quae quos reiciendis similique tempora voluptatum ?
Contenu du panneau.
Chaque data-target doit correspondre exactement à l'
id du panneau associé. Vous pouvez utiliser
# ou non — le JavaScript gère les deux cas.
⚠️ Ne pas ajouter de margin ou de
padding directement sur le panneau pour garantir une
animation fluide. Utilisez .collapse-body pour gérer les
espacements.
Les attributs suivants sont automatiquement ajoutés à l'initialisation par Collapse.init() :
aria-expanded (état ouvert / fermé)aria-controls (lien vers le panneau)aria-labelledby (si le bouton possède un
id)
role="region" (zone de contenu
accessible) à rajouter sur le panel si c'est un élément important.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.collapse-item |
<div> |
Conteneur principal avec bordure, border-radius et
gestion du débordement.
|
.collapse-btn |
<button> |
Bouton déclencheur en pleine largeur. Affiche une bordure inférieure quand le panneau est ouvert
(aria-expanded="true"), retirée quand fermé.
|
.collapse-btn-sm |
<button> |
Paddings réduits via --collapse-button-padding-x-sm
et --collapse-button-padding-y-sm.
|
.collapse-btn-md |
<button> |
Paddings intermédiaires (par défaut). |
.collapse-btn-lg |
<button> |
Paddings augmentés via --collapse-button-padding-x-lg
et --collapse-button-padding-y-lg.
|
.collapse-body |
<div> |
Contenu du panneau avec padding via variables CSS. |
.collapse-indicator |
<span> |
Icône via ::after, animée en rotation (135°) quand le
bouton possède la classe .is-open.
|
Chaque .collapse-item est indépendant. Plusieurs panneaux
peuvent être ouverts simultanément.
Les modificateurs de taille s'appliquent sur chaque .collapse-btn individuellement via les tokens CSS dédiés.
| ÉTAT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
| Ouvert | [aria-expanded="true"] |
Le bouton reçoit la classe .is-open. Le panneau est
visible (hidden retiré). La bordure inférieure du
bouton est affichée.
|
| Fermé | [aria-expanded="false"] |
Panneau avec attribut hidden. La bordure inférieure
du bouton est masquée. C'est l'état initial par défaut.
|
| En animation | [data-animating] |
Attribut temporaire posé par le JS. Bloque les clics répétés pendant l'animation (200 ms). |
| Focus | :focus-visible |
Contour visible sur le bouton lors de la navigation clavier (à styler via CSS). |
Le composant est piloté par la classe Collapse. Elle s'appuie
sur la délégation d'événements (un seul listener sur document)
et utilise l'API Web Animations pour les transitions.
import Collapse from './Collapse.js';
// A single instance is enough for the entire page.
new Collapse();
La classe implémente un guard Collapse.initialized :
instancier Collapse plusieurs fois n'entraîne aucun
doublon de listeners.
| ATTRIBUT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
data-ui="collapse" |
.collapse-btn |
Identifie le bouton comme déclencheur du collapse. |
data-target |
.collapse-btn |
Sélecteur de l'élément panneau cible. Accepte #id ou
id.
|
data-ui="accordion" |
.accordion |
Optionnel. Marque un wrapper pour activer la logique de groupe (mode single). |
data-type="single" |
.accordion |
Optionnel. Active le mode exclusif : un seul panneau ouvert à la fois dans le groupe. |
| MÉTHODE | DESCRIPTION |
|---|---|
Collapse.init() |
Initialise aria-controls, aria-expanded, role="region"
et aria-labelledby sur tous les boutons [data-ui="collapse"] du DOM. Gère également l'état
initial de l'indicateur sans transition.
|
Collapse.toggle(panel, button)
|
Bascule l'état du panneau. Appelle open ou close selon panel.hidden.
|
Collapse.open(panel, button) |
Ouvre un panneau avec animation (Web Animations API, 200 ms). Met à jour aria-expanded="true", ajoute .is-open sur le bouton et appelle handleAccordion.
|
Collapse.close(panel, button)
|
Ferme un panneau avec animation (Web Animations API, 200 ms). Repose hidden et met à jour aria-expanded="false" en fin d'animation.
|
Collapse.handleAccordion(button)
|
Si le bouton est dans un [data-ui="accordion"][data-type="single"],
ferme tous les autres panneaux ouverts du groupe.
|
// Open a panel programmatically
const panel =
document.getElementById('my-panel');
const btn = document.querySelector('[data-target="#my-panel"]');
Collapse.open(panel, btn);
// Close a panel programmatically
Collapse.close(panel, btn);
| TOKEN | RÔLE |
|---|---|
--collapse-border-width |
Épaisseur des bordures |
--collapse-border-style |
Style de bordure (solid, dashed…)
|
--collapse-border-radius |
Rayon des coins du conteneur |
--collapse-border-color |
Couleur des bordures |
--collapse-background-color |
Couleur de fond du conteneur |
--collapse-button-background-color |
Couleur de fond du bouton |
--collapse-button-padding-x |
Padding horizontal du bouton (défaut) |
--collapse-button-padding-y |
Padding vertical du bouton (défaut) |
--collapse-button-padding-x-sm
|
Padding horizontal — taille sm |
--collapse-button-padding-y-sm
|
Padding vertical — taille sm |
--collapse-button-padding-x-md
|
Padding horizontal — taille md |
--collapse-button-padding-y-md
|
Padding vertical — taille md |
--collapse-button-padding-x-lg
|
Padding horizontal — taille lg |
--collapse-button-padding-y-lg
|
Padding vertical — taille lg |
--collapse-body-padding-x |
Padding horizontal du corps |
--collapse-body-padding-y |
Padding vertical du corps |
--collapse-indicator-content |
Contenu de l'indicateur (caractère affiché via ::after)
|
/* Global variables */
:root {
--collapse-border-radius:
8px;
--collapse-button-padding-x: 1.5rem;
--collapse-button-padding-y: 1.125rem;
}
/* Light theme */
:root[data-theme="light"] {
color-scheme:
light;
--collapse-border-color: #222222;
}
/* Dark theme */
:root[data-theme="dark"] {
color-scheme:
dark;
--collapse-border-color: #888888;
}
| PRATIQUE | DÉTAIL |
|---|---|
aria-expanded |
Posé et mis à jour automatiquement par le JS sur chaque bouton. Communique l'état ouvert/fermé aux lecteurs d'écran. |
aria-controls |
Lie le bouton à son panneau via l'id. Initialisé
automatiquement par Collapse.init().
|
aria-labelledby |
Associe le panneau à son bouton déclencheur. Ajouté automatiquement par Collapse.init() lorsque le bouton possède un id.
|
hidden |
L'attribut HTML natif masque le panneau aux technologies d'assistance et aux moteurs de recherche. |
Élément <button> |
Utilisez toujours un <button> (pas un <div>) pour assurer la navigation clavier native
(Tab, Entrée, Espace).
|
| Focus visible | Stylez :focus-visible sur .collapse-btn
pour les utilisateurs clavier.
|
role="region" |
Définit le panneau comme une région accessible pour les technologies d’assistance. À rajouter si le panel est important. |
aria-hidden="true" |
À poser manuellement sur .collapse-indicator pour
masquer l'icône
décorative aux lecteurs d'écran.
|
N'utilisez pas display: none à la place de hidden : le JS anime la hauteur et repose l'attribut natif
en fin d'animation. Toute surcharge CSS peut casser le comportement.
Toujours ajouter hidden sur les panneaux fermés au
chargement. Sans cet attribut, les panneaux sont considérés comme ouverts par défaut.
Placer le .collapse-indicator en dernier dans le bouton
pour qu'il
soit poussé à droite par le justify-content:
space-between du .collapse-btn.
Ne pas instancier Collapse avant le chargement du DOM.
Utilisez DOMContentLoaded ou placez le script en bas de
page.
L'animation repose sur la Web Animations API (element.animate()), supportée par tous les navigateurs
modernes. Pour IE11, un polyfill est nécessaire.
Collapse · WEBDEV-UI DOCS / V1