Un accordéon en css

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.