Comment afficher / masquer les éléments HTML en utilisant uniquement CSS

La possibilité d'afficher / masquer un élément HTML devrait être assez simple, non? Eh bien, nous pouvons utiliser certains attributs HTML et fonctions JavaScript si nous le voulons, mais que faire si nous voulons effectuer cette tâche sans utiliser JavaScript. Est-ce possible?

Oui, c'est possible. Nous pouvons le faire avec seulement CSS.

Oui, vous avez bien entendu! Voici comment obtenir le même résultat avec uniquement CSS.

Comment afficher / masquer des éléments HTML avec CSS

Dans cet exemple, nous allons simplement afficher / masquer une liste non ordonnée (ul li). La première étape consiste à créer un bouton que nous nommerons "Toggle". Ensuite, nous cliquons sur le bouton pour afficher et masquer la liste non ordonnée.

Ce dont vous avez besoin pour le HTML

C'est le plus basique et du HTML simple sur lequel nous travaillerons. Nous avons l'étiquette, le type d'entrée, la case à cocher et ul li dans notre HTML. La case à cocher doit être cochée / décochée quand quelqu'un clique sur le contenu de l'étiquette.

Nous utilisons l'attribut dans l'étiquette, qui a un ID «case à cocher» comme type d'entrée, pour obtenir le même résultat. Ici, nous avons l'ID en tant que «checkBtn», nous avons donc ajouté la valeur de l'attribut comme étant la même pour «checkBtn». Nous avons également créé un ul li et ul a un ID de «listing».

Ce dont vous avez besoin pour le CSS

Ces sont les styles CSS que nous utiliserons. Au départ, nous avons défini ul comme «n'afficher aucun» en ajoutant le style à id #listing comme «n'afficher aucun». Nous avons également supprimé le type d'entrée «case à cocher» de notre vue en faisant «#checkBtn» comme «n'en afficher aucun».

Voici maintenant l'astuce. Lorsque quelqu'un clique sur l'étiquette, la case à cocher du type d'entrée est cochée. Cela signifie que la pseudo-classe sera lue comme "cochée" sur le #checkBtn, qui est la balise de case à cocher du type d'entrée. Chaque fois que #checkBtn se lit comme «vérifié», nous pouvons alors utiliser le sélecteur ~ CSS pour faire le #listing, qui est l'ID de notre ul, comme un bloc d'affichage.

Lorsque vous cliquez à nouveau sur le bouton bascule (étiquette), la pseudo-classe «cochée» se détache et #listing revient à «n'afficher aucun». Nous devons ajouter le style à l'étiquette pour lui donner l'apparence d'un bouton et ajouter un style au survol, ce qui permet à votre souris de survoler activement le bouton et d'afficher une réaction. C'est ainsi que nous pouvons afficher / masquer l'élément HTML en utilisant uniquement CSS.

Remarque: Vous pouvez également utiliser le bouton et d'autres balises disponibles selon vos besoins, mais il doit se trouver à l'intérieur de la balise d'étiquette.

La sortie

Voici la démonstration de sortie dans l'image ci-dessous. Lorsque vous cliquez sur le bouton bascule, la liste ul li apparaît. Lorsque vous cliquez à nouveau sur le bouton bascule, la liste ul li disparaît.

A Simple and Seamless Process

Utiliser toutes les capacités de CSS peut améliorer notre site performances et rapidité. Tant que nous connaissons les processus, tout est possible. Pour en savoir plus sur ces processus techniques, contactez nos experts aujourd'hui .

À propos de l'auteur

Nadim Shah est consultant technique chez Perficient Inc. Il travaille comme développeur Front-end. Il aime apprendre et explorer de nouveaux frameworks JS et partager les mêmes.

Plus de cet auteur