"/>

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.

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.