Accordion Single
Un seul panneau ouvert à la fois — cliquer un en-tête ferme automatiquement celui qui était actif. Comportement exclusif pur CSS + JS vanilla, zéro dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le comportement exclusif repose sur la fonction toggleAccordion(btn, mode), appelée via onclick sur chaque bouton. Elle remonte le DOM en deux niveaux : btn.parentElement donne l'.accordion-item courant, puis .parentElement donne le conteneur .accordion. Quand mode === 'single', elle retire la classe active de tous les .accordion-item frères avant de basculer (classList.toggle) la classe sur l'item sélectionné.
L'ouverture et la fermeture sont entièrement pilotées par CSS : le panneau (.accordion-content) démarre à max-height: 0; overflow: hidden. Quand l'item porte la classe active, la règle .accordion-item.active .accordion-content passe max-height à 200px. La transition max-height .4s anime le déploiement — même si le contenu réel est plus court, l'animation reste fluide.
Le chevron SVG (.accordion-icon) pivote de 180° via transform: rotate(180deg) appliqué sur .accordion-item.active .accordion-icon, avec une transition transform .3s. L'item actif reçoit également une bordure indigo renforcée (rgba(99,102,241,.5)) et un box-shadow diffus — repères visuels sans changement de couleur de fond.
La traversée DOM (parentElement) garantit l'isolation par groupe : chaque conteneur .accordion-single est autonome. Plusieurs accordéons sur la même page fonctionnent indépendamment, sans état global ni identifiant partagé.
Accessibilité
- prefers-reduced-motion absent — la transition
max-height .4set la rotation du chevron s'exécutent quelle que soit la préférence OS. Pour se conformer à WCAG 2.3, ajouter :@media (prefers-reduced-motion: reduce) { .accordion-content, .accordion-icon { transition: none; } }. - Les boutons sont des
<button>natifs, navigables au clavier (Tab · Entrée · Espace) sans code supplémentaire. - Aucun
aria-expandedsur les boutons — un lecteur d'écran n'annoncera pas l'état ouvert/fermé. À ajouter danstoggleAccordion:btn.setAttribute('aria-expanded', c.classList.contains('active')). - Contraste : texte des en-têtes (blanc pur sur fond ~
#0a0a0f) > 10:1 — WCAG AAA. Corps de texte àrgba(255,255,255,.6): ratio ~4,9:1 — WCAG AA. - Aucun
role="region"niaria-labelledbysur les panneaux.accordion-content— l'association bouton/panneau n'est pas explicite pour les technologies d'assistance.
Compatibilité navigateur
Nécessite classList et les transitions CSS — supportés dans tous les navigateurs modernes. Zéro dépendance externe.
Sans JS, les panneaux restent dans leur état HTML initial (le premier porte <code>class="accordion-item active"</code>). Le CSS affiche correctement l'état ouvert — le contenu reste accessible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="accordion accordion-single">
<div class="accordion-item active">
<button class="accordion-header" onclick="toggleAccordion(this, 'single')">
Titre de la section
<svg class="accordion-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"></path>
</svg>
</button>
<div class="accordion-content">
<div class="accordion-body">Contenu de la section.</div>
</div>
</div>
<!-- Répéter .accordion-item pour chaque entrée supplémentaire -->
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --primary | #6366f1 | Couleur de la bordure et du halo actif (rgba(--primary,.2/.5)). Remplacez par votre couleur brand — la bordure et le box-shadow s'adaptent automatiquement. |
| --text-primary | #ffffff | Couleur du texte des en-têtes de section. Modifier pour un thème clair ou une palette personnalisée. |
| .accordion max-width | 350px | Largeur maximale du conteneur accordion. Passer à 480px pour un contexte desktop, 100% pour une mise en page fluide. |
| .accordion-item.active .accordion-content max-height | 200px | Hauteur maximale du panneau ouvert. Augmenter selon le contenu le plus long — 400px pour du texte long, 1000px pour un contenu dynamique inconnu. |
| transition: max-height .4s (.accordion-content) | .4s | Durée d'animation à l'ouverture/fermeture. Réduire à .25s pour plus de réactivité, augmenter à .6s pour un effet plus ample. |
| transition: transform .3s (.accordion-icon) | .3s | Durée de rotation du chevron SVG. Aligner sur la durée de max-height pour une animation cohérente. |
| mode 'single' vs autre valeur | 'single' | Deuxième argument de onclick="toggleAccordion(this, 'single')". Toute valeur différente de 'single' désactive le comportement exclusif et autorise plusieurs panneaux ouverts simultanément. |
| .accordion-header padding | 16px 20px | Espacement intérieur des boutons en-tête. Réduire à 12px 16px pour une interface dense, augmenter à 20px 24px pour un style aéré. |
FAQ
'single' par n'importe quelle autre valeur dans l'attribut onclick de chaque bouton (ex. toggleAccordion(this, 'multi')). En mode single, la fonction retire la classe active des items frères avant de basculer ; avec une autre valeur, elle saute cette étape et laisse plusieurs panneaux ouverts.max-height: 200px sur .accordion-item.active .accordion-content. Passez à une valeur haute (ex. 1000px) — la transition anime toujours de 0 à la valeur cible ; le ressenti visuel reste fluide même si le contenu est nettement plus court.toggleAccordion remonte le DOM depuis le bouton cliqué (btn → .accordion-item → .accordion) et ferme uniquement les frères du même groupe conteneur. Deux .accordion-single distincts sur la page sont totalement indépendants, sans identifiant partagé ni état global.
