Accordion Fold
Un accordéon dont chaque panneau se déplie comme une feuille pliée : la hauteur s'ouvre en 0,5 s à la taille réelle du contenu pendant que le texte pivote de −90° à 0° autour de son bord supérieur, en perspective de 600 px, avec un léger rebond. Une seule rubrique ouverte à la fois, aria-expanded, panneaux fermés hors de la tabulation, fondu de 0,15 s si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque rubrique est une .accordion-fold-item : un vrai <button> d'en-tête avec une flèche, puis un panneau .accordion-fold-content qui contient le texte .accordion-fold-inner. Fermé, le panneau vaut max-height: 0, overflow: hidden et visibility: hidden ; il porte aussi perspective: 600px, la distance d'où l'on regarde le pli. Le texte attend à rotateX(-90deg) et opacity: 0, avec transform-origin: center top : il est couché à plat, accroché par son bord supérieur, comme le rabat d'une feuille.
Au clic, la classe .open lance deux mouvements. Le panneau grandit en 0,5 s sur cubic-bezier(0.65, 0, 0.35, 1) ; le texte se relève de −90° à 0° en 0,4 s sur une courbe à rebond, 0,1 s plus tard, et passe à l'opacité 1. Mesuré 150 ms après le clic : panneau à 7 px sur 66 et texte encore à −47° (Chromium 151), mêmes valeurs à quelques pixels près dans Firefox 153 et WebKit 26.5 ; tout est en place vers 0,6 s. La flèche tourne de 180° en 0,4 s. À la fermeture, le même chemin se joue à l'envers et visibility ne repasse à hidden qu'au bout des 0,5 s, pour que la feuille reste visible pendant qu'elle se replie.
La hauteur vient du script (2,3 Ko), pas d'une valeur fixe : à l'ouverture, il écrit dans max-height la hauteur réelle du contenu (scrollHeight), puis la remplace par none à la fin de la transition. Un texte de 300 px s'ouvre donc en entier (mesuré dans les trois moteurs), et un panneau ouvert suit son contenu quand la fenêtre change de largeur. Pour refermer depuis none, il repasse par la hauteur en pixels avant de revenir à 0, sinon la fermeture serait instantanée. Il ferme les autres rubriques de la même liste, pose aria-expanded et aria-controls (avec un id créé si le panneau n'en a pas), et fonctionne pour toutes les listes .accordion-fold-container de la page. Si une liste est masquée au moment de l'ouverture (onglet caché), le panneau passe directement à none.
Accessibilité
- Clavier et état : les en-têtes sont des
<button>— Tab les atteint, Entrée ou Espace ouvre et ferme. Chaque en-tête annoncearia-expanded(true/false, mesuré) et désigne son panneau pararia-controls. La flèche décorative est enaria-hidden. - Panneaux fermés vraiment cachés :
visibility: hiddenretire le contenu fermé de la tabulation et des lecteurs d'écran. Mesuré avec un lien dans un panneau fermé : depuis le dernier en-tête, Tab passe directement à l'élément qui suit la liste (Chromium, Firefox). - Mouvement réduit : sous
prefers-reduced-motion, ni pli ni glissement de hauteur — le panneau s'ouvre à sa taille d'un coup et le texte apparaît par un fondu de 0,15 s (mesuré dans les trois moteurs : 66 px sur 66 et angle 0° dès 150 ms). - Contraste : en-têtes blancs sur #0a0a0f (19,8:1). Le texte des panneaux, blanc à 60 % d'opacité, reste vers 7:1 sur ce fond ; sur un fond clair, recolorez les deux (les scènes d'exemple le font).
Compatibilité navigateur
CSS (perspective, rotateX, transitions de max-height et de visibility) + 2,3 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même déroulé du pli, même hauteur réelle pour un contenu long, une seule rubrique ouverte, même comportement sous mouvement réduit. Rien de récent : les transformations 3D et matchMedia existent partout depuis bien avant 2018.
Sans JavaScript, les en-têtes ne font rien et les panneaux restent fermés : si le contenu est indispensable, ajoutez la classe open dans le HTML aux rubriques à montrer d'office. Sous mouvement réduit, le pli et le glissement sont remplacés par un fondu court.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="accordion-fold-stage">
<div class="accordion-fold-container">
<div class="accordion-fold-item">
<button class="accordion-fold-header" type="button">
<span>…</span>
<span class="accordion-fold-arrow" aria-hidden="true">▼</span>
</button>
<div class="accordion-fold-content">
<div class="accordion-fold-inner">…</div>
</div>
</div>
… (une .accordion-fold-item par rubrique)
</div>
</div>Le code complet HTML + CSS + JS de Accordion Fold, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Angle du pli (CSS — rotateX(-90deg) sur .accordion-fold-inner) |
−90° : texte couché à plat avant de se relever | −45° donne un pli plus discret ; au-delà de −90°, le texte passe derrière son bord et disparaît pendant une partie du mouvement. |
Perspective (CSS — perspective: 600px sur .accordion-fold-content) |
600 px | 300 px accentue la profondeur (le bas du texte semble venir vers vous) ; 1 200 px aplatit le pli. |
| Durées (CSS — 0,5 s pour la hauteur, 0,4 s + 0,1 s de retard pour le texte) | 0,5 s / 0,4 s | Gardez la hauteur un peu plus longue que le pli, sinon le texte se relève dans un panneau encore trop court. Changez aussi le visibility 0s .5s si vous changez la durée de hauteur. |
Rebond (CSS — cubic-bezier(.34, 1.56, .64, 1) sur le texte) |
le texte dépasse légèrement 0° avant de se poser | ease-out pour un pli sobre, adapté à une notice ou un contrat. |
Plusieurs rubriques ouvertes (JS — boucle items.forEach du clic) |
une seule rubrique ouverte par liste | Supprimez la boucle qui ferme les autres rubriques pour laisser chacune s'ouvrir indépendamment. |
Rubrique ouverte au chargement (HTML — classe open sur .accordion-fold-item) |
toutes fermées | Le script la reconnaît : panneau à sa hauteur, aria-expanded="true", sans animation au chargement. |
FAQ
height vers auto (sauf Chromium récent avec interpolate-size, absent de Firefox 153 et WebKit 26.5, mesuré). Le script mesure donc la hauteur réelle et l'écrit dans max-height, puis repasse à none une fois ouvert. Une valeur fixe (200 px par exemple) couperait les contenus plus longs et fausserait la durée : un texte de 48 px parcourrait ses 48 px en une fraction des 0,5 s prévues..accordion-fold-container, sans id à écrire. Les panneaux fermés sont hors de la tabulation, la page reste rapide à parcourir au clavier. Pour un référencement des réponses, gardez le texte dans le HTML (il l'est ici, seulement caché).
