Comment créer un accordéon en css uniquement ?
Voici un exemple de blocs « accordéons », qui s’ouvrent et se ferment au clic sur un élément input. Ici on va utiliser des boutons radio. Je donne ici trois exemples, adaptés de modèles trouvés sur internet. Ces accordéons ne sont pas optimisés pour l’accessibilité. Pour un exemple de référence, reportez vous à l’exemple donné par le W3C .
Un accordéon sans transition
Sur ce premier bloc d’accordéons, le contenu passe d’un display:none à un display: block; au clic sur l’input, les panel s’ouvrent donc sans effet de transition. Les input radios sont tous regroupés au début du bloc d’accordéon, cachés avec un text-indent négatif.
See the Pen
css only accordion / input radio by yuyazz (@yuyazz)
on CodePen.
Un accordéon avec transition
Le deuxième, exactement le même au niveau du code, joue cette fois sur la hauteur du contenu avec max-width:0 qui lors du clic sur l’input passe à max-width:400px, avec un effet de transition.
See the Pen
css only accordion / input radio2 by yuyazz (@yuyazz)
on CodePen.
Un accordéon avec transition et effet de rotation des icones
Dans ce troisième exemple, un peu plus poussé, les boutons radios sont situés individuellement dans chaque bloc, à l’inverse du premier. Le plus et le moins sont des pseudos éléments faits en css (deux div avec une seule bordure et une rotation) pour leur appliquer un effet également.
See the Pen
css only accordion / input radio 3 by yuyazz (@yuyazz)
on CodePen.
Un accordéon qui s’ouvre au survol de la souris
Et voici le même genre d’accordéon qui ne fonctionne qu’au survol de la souris.
See the Pen
hover accordion tabs in css by yuyazz (@yuyazz)
on CodePen.