Créez un accordéon en pur CSS3 sans JS

on

J’adore le CSS3 et chaque jour, je découvre une fonctionnalité que j’ignorais ou que je n’imaginais pas réalisable en pur CSS3 HTML5. Enfin, comprenez moi, je me suis habitué à ce que le JavaScript gère l’interaction de l’utilisateur par le biais d’événements, et cet exemple est très fréquent quand on parle des accordéons en HTML.
Mais plus maintenant, l’exemple que je vais vous montrer (puisé sur internet) prouve qu’il est tout à fait possible de créer un accordéon interactif en HTML5/CSS3 uniquement!

Un Accordéon en Pur CSS3? Comment est-ce possible?!

Accordéon en pur CSS
Accordéon en pur CSS

L’auteur explique que cela est réalisable via le sélecteur :target c’est donc réalisable uniquement sur les navigateurs qui supportent ce sélecteur (Consulter sur Can I Use la liste des navigateurs qui supportent le sélecteur :target).

Le sélecteur :target ?

Supposez que vous avez un élément dont l’ID est #mon-super-element et un lien qui pointe dessus. C’est une ancre. Si vous cliquer sur le lien de cette ancre, elle sera alors directement affectée par le sélecteur :target.

Exemple concret

Je vais dans cet exemple utiliser le code source suivant :
<style>
:target {
text-decoration: underline;
color: #0089a2;
}
</style>
<p><a href="#num-1">Cliquez-moi pour surliger numéro 1</a></p>
<p><a href="#num-2">Cliquez-moi pour surligner numéro 2</a></p>
<ol>
<li id="num-1">Numéro 1</li>
<li id="num-2">Numéro 2</li>
</ol>

Voir le résultat sur CSSDeck

Comme vous pourrez le voir dans l’exemple, c’est très simple, et une fois le principe compris, on se rend compte de la multitude de possibilités qui s’offrent à nous. À présent, comprenons ce qui se passe avec notre accordéon.

 

Consultez l’exemple crée par LukyVj sur CSSDeck

En gros l’exemple est composé de trois div chaqu’un avec un ID unique (prévisible vous me direz) contenant eux même un lien pointant vers ce même ID. Ceci facilite le ciblage du div quand le lien respectif est cliqué.
Le contenu est initialement caché avec une simple propriété display:none sur les div. Quand le lien de l’onglet est cliqué, la propriété display du div change en display:block et il est affiché! L’animation qui suit est une simple transition (propriété CSS3 aussi).
Les autres onglets sont « réduits » si un onglet est cliqué, ceci est aussi réalisé par le selecteur :target.
Voilà, personnellement, je suis vraiment fan du concept! En espérant que cet article vous a plu.

Laisser un commentaire

Contenu non disponible.
Merci d’accepter les cookies en cliquant sur « Accepter » sur la bannière.

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

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.

Fermer