Cliquer pour révéler. Événement de clic CSS pur sans : cible

Divulgacher Est un bloc avec des informations qui sont initialement cachées aux utilisateurs et qui n'apparaît que lorsque l'utilisateur clique sur un certain bouton. Sur mon site, sous forme de spoil, RÈGLEMENTS ajouter des commentaires. Si vous cliquez sur le mot RÈGLES, qui est mis en surbrillance, un bloc avec des règles s'ouvrira en dessous.

Comme je l'ai écrit ci-dessus, je vais montrer plusieurs méthodes qui sont intrinsèquement similaires, mais utilisent des scripts différents et réalisent des animations différentes. Vous trouverez ci-dessous des exemples.

Analysons chacune des méthodes afin que vous puissiez en appliquer une sur votre site Web. Mais avant de faire cela, définissons la bibliothèque jquery. Si vous l'avez déjà connecté, passez à l'affichage des méthodes, sinon, connectez-vous dans l'en-tête ou le sous-sol.

Allons-y maintenant dans l'ordre.

Méthode numéro 1

En fait, le plus simple des moyens, lorsqu'il est pressé, le bloc apparaît instantanément. Disparaît instantanément lorsque vous appuyez à nouveau. C'est simple. J'utilise aussi cette méthode.

Nous ajoutons un script très simple. Vous pouvez l'ajouter directement à l'endroit où vous souhaitez afficher le bloc, vous pouvez le connecter dans l'en-tête ou le pied de page, ou vous pouvez le mettre dans un fichier, que vous pouvez ensuite connecter au site, à nouveau, n'importe où.

Le script fonctionne avec un bloc auquel une classe est assignée spoiler-corps et le montre lorsqu'un bouton, un bloc ou un lien est cliqué, en général, tout ce qui a une classe assignée titre-spoiler... Pour afficher un bloc, le script utilise la méthode basculer.

Divulgacher Afficher/Masquer

Le bouton qui s'ouvrira sera le texte à l'intérieur de la balise b comme je l'ai dit, vous pouvez utiliser n'importe quelle balise.

Eh bien, assignons les styles minimaux. Le paramètre principal est affichage : aucun le bloc à masquer. C'est une condition préalable, sinon cela ne fonctionnera pas.

Spoiler-title (curseur : pointeur ;) .spoiler-body (affichage : aucun ; arrière-plan : # f1f1f1 ;)

Rien d'autre n'est nécessaire, tout devrait fonctionner. Il y a encore une chose. Vous pouvez rendre cette animation un peu plus fluide. Pour cela, entre parenthèses après la méthode basculer ajouter la valeur en millisecondes.
Par exemple: basculer (500)... Maintenant, l'ouverture du bloc ne se produira pas instantanément, mais une demi-seconde 0,5. Le bloc d'ouverture apparaîtra en diagonale du coin supérieur gauche au coin inférieur droit. Vous pouvez le voir dans l'exemple ci-dessus.

Méthode numéro 2

Pour cette méthode et pour toutes les autres, tous les mêmes blocs et classes seront utilisés, je ne vais donc pas tout repeindre. Seul le script lui-même sera différent.

Cette méthode ouvre en douceur le bloc et il apparaît de haut en bas. Pour apparaître, le script utilise la méthode slideToggle.

Ici, comme dans la première version, vous pouvez modifier le temps d'animation. Par défaut, sa valeur est de 400 millisecondes. Si vous souhaitez accélérer ou ralentir, ajoutez la valeur entre parenthèses.
Par exemple: slideToggle (600).

Méthode numéro 3

Cette méthode est essentiellement la même que la seconde, avec la même animation, mais elle a une caractéristique intéressante. Le bouton sur lequel on a cliqué pour ouvrir le bloc change. Dans l'exemple que vous avez vu, il ne s'agit que de texte - Afficher le texte qui, à l'ouverture du bloc, se transforme en Masquer le texte.
Si vous ajoutez de l'imagination, vous pouvez ajouter une image ou un bloc à la place du texte, que vous pouvez décorer avec des styles. Utilisée de cette manière, la fonction suivante.

Vous pouvez modifier le temps d'animation en utilisant la même méthode que dans la deuxième méthode.

En gros, c'est tout, ce sont trois méthodes principales que je voulais montrer. Lequel vous convient, vous décidez. Maintenant, vous pouvez facilement organiser le bloc qui apparaît après avoir cliqué sur le bouton.

Utilisez-vous des spoilers sur votre site Web et pourquoi ?

C'est tout, merci de votre attention. ??

Existe-t-il un moyen de gérer les événements de clic sur CSS sans utiliser JavaScript. Vous pouvez utiliser la méthode avec : cible... Mais que faire s'il ne peut pas être utilisé? Il existe une autre méthode.

Regardez une démo. C'est entièrement fait en CSS, pas une seule ligne de JavaScript. Il est basé sur l'utilisation originale des sélecteurs : active et : hover.

La description

Tout d'abord, vous devez créer un conteneur qui contiendra le bouton et les blocs qui s'afficheront au clic de la souris. La structure de balisage ressemblera à ceci :

Vous devez rendre le .content invisible jusqu'à ce que le bouton de la souris soit enfoncé sur le .wrapper. Pour résoudre le problème, définissez la propriété display: none pour .content. Ensuite, lorsque nous cliquons sur le .wrapper, nous activerons la propriété display: block pour le .content. Pour ce faire, définissez la propriété display: block pour .wrapper: active .content. Dans cet état, le .content ne sera visible que lorsque le bouton de la souris est enfoncé. Si vous le lâchez, le .content disparaît à nouveau. Pour corriger, faisons en sorte que lorsque le curseur de la souris est sur .content, la propriété display: block soit affectée à l'élément. C'est-à-dire que nous définissons la propriété display: block pour .content: hover. Le code CSS ressemblera à ceci :

Contenu (affichage : aucun ;) .wrapper : actif .content (affichage : bloc ;) .content : hover (affichage : bloc ;)

Il ne reste plus qu'à « peigner » l'apparence et lui donner de la clarté :

Wrapper (position : relative ;) .button (background : jaune ; hauteur : 20px ; largeur : 150px ;) .content (position : absolue ; padding-top : 20px ;) .content li (background : rouge ;)

Le texte du bouton dans le code ci-dessus aura un fond jaune et les informations affichées lorsque le bouton de la souris est enfoncé auront un fond rouge.

Dans le processus de création d'un site Web ou d'un blog et de son remplissage ultérieur avec du contenu, pour diverses raisons, il devient parfois nécessaire de masquer une partie du texte, de placer des informations plus volumineuses dans un bloc masqué pour le moment, mais en même temps indiquer à l'utilisateur qu'il y a autre chose, et lui donner la possibilité de visualiser le contenu caché sans passer à la ligne ou à la page suivante.
Auparavant, beaucoup de javascript était utilisé pour implémenter une telle solution, mais maintenant tout peut être fait très facilement en utilisant des propriétés étonnantes.

Aujourd'hui, nous allons examiner le moyen le plus simple de créer des blocs de contenu cachés sur les pages du site et dans les messages individuels, qui se développent lorsque vous cliquez sur un certain élément de texte, en utilisant exclusivement les propriétés CSS3. Un seul mot, une phrase sélectionnée, ainsi qu'une phrase entière ou une icône informative peuvent servir de commutateur.
De tels blocs sont souvent utilisés sur des pages avec une grande quantité de contenu, afin de le rendre plus structuré et compact, tandis que tout le contenu est divisé en soi-disant groupes, dans lesquels seuls les titres sont présentés à l'utilisateur, tout le texte est masqué par par défaut et peut être vu en cliquant sur un élément spécifique (voir ci-dessus).

Essayons de faire sans eau inutile, voyons tout ce mécanisme simple en action, avec un exemple illustratif, vous pouvez également modifier quelque chose si vous le souhaitez :

Exemple 1

Dans le rôle des commutateurs pour les blocs déroulants avec des informations supplémentaires, du texte non sélectionné et non marqué est utilisé, avec une proposition sans ambiguïté de cliquer dessus, ce que vous devez faire sans crainte ni doute pour voir)))

Comme vous pouvez le voir, tout fonctionne bien, le contenu caché à la fois apparaît sans problème et disparaît d'un léger clic de souris, et en même temps nous avons utilisé le minimum de code exécutable, à la fois dans le framework html et dans la formation de css modes. Sans connexion de bibliothèques javascript supplémentaires, avec alarme éternelle, et non si elles sont désactivées du côté de l'utilisateur.
Tout cela est possible grâce à la pseudo-classe CSS3. : vérifié appliqué aux éléments d'interface tels que les boutons radio (). Ce que nous avons réellement fait, dans le tag nous avons attribué la valeur de la case à cocher à l'attribut type, ainsi que l'identifiant id = "hd-1" correspondant à l'identifiant unique pour = "hd-1" basculement du bloc courant. Nous masquerons complètement et définitivement les cases à cocher en enregistrant la propriété display dans la classe .hide : none;
En fait, il n'y a rien de spécial à expliquer ici, tout le mécanisme d'activation et de désactivation des blocs cachés se compose de trois éléments :

• Case à cocher - balise avec le sens case à cocher attribut taper et avec un identifiant de lien spécifique
• Titre (commutateur de texte) - balise avec une valeur d'identifiant unique pour l'attribut pour, (l'identifiant doit être le même que l'identifiant de la balise saisir avec le sens case à cocher attribut taper).
• Bloc de contenu - une balise div, qui contiendra jusqu'à des temps meilleurs, jusqu'à ce que l'utilisateur clique, divers contenus cachés (texte, images, etc., etc.)

J'espère qu'à partir de mon explication confuse, il est toujours devenu clair quel est le tour. CSS applique de nouveaux styles (en utilisant la pseudo-classe vérifié) pour afficher un bloc de contenu qui était auparavant masqué uniquement lorsque l'utilisateur clique sur un élément associé à une case à cocher par un identifiant unique.

De tout cela découle note importante:

lorsque vous utilisez plusieurs cases masquées sur la même page, chaque bouton radio doit avoir un identifiant unique différent des identifiants des autres cases.

Donc, en mots, nous avons compris où et pourquoi, regardons maintenant le squelette HTML de l'ensemble de la construction :

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Cliquez ici pour ouvrir ! < div>Contenu caché... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Cliquez ici pour en lire plus! < div>Contenu caché...

Cliquez ici pour ouvrir !

Cliquez ici pour en lire plus!

Ensuite, nous passons directement à la formation de styles CSS, sans lesquels toute cette structure ne fonctionnera pas. Le strict minimum de code, sans aucune décoration, a juste un peu mis en valeur le fond du bloc déroulant pour définir pour vous et afficher les cadres du texte caché. Vous pouvez concevoir des blocs comme vous le souhaitez, accrocher des bordures, des coins arrondis, surligner du texte ou autre.

1. CSS

... cacher,. masquer + étiquette ~ div (affichage : aucun ;) / * type de texte d'étiquette * /... masquer + étiquette,. masquer : coché + étiquette (remplissage : 0 ; couleur : vert ; curseur : pointeur ; bordure en bas : 1px en pointillé vert ;). hide : coché + label + div (affichage : block ; background : #efefef ; - moz- box- shadow : inset 3px 3px 10px # 7d8e8f ; - webkit- box- shadow : inset 3px 3px 10px # 7d8e8f ; box- shadow : inset 3px 3px 10px # 7d8e8f ; remplissage : 10px ;)

/ * masquer les cases à cocher et les blocs avec le contenu * / .hide, .hide + label ~ div (affichage : aucun ;) / * vue texte du label * / .hide + label, .hide : coché + label (remplissage : 0 ; couleur : vert ; curseur : pointeur ; bordure en bas : 1px en pointillé vert ;) / * vue du texte de l'étiquette avec le commutateur actif * / .hide : coché + étiquette (couleur : rouge ; bordure en bas : 0 ;) / * lorsque la case à cocher est afficher les blocs actifs avec contenu * / .hide : coché + étiquette + div (affichage : bloc ; fond : #efefef ; -moz-box-shadow : inset 3px 3px 10px # 7d8e8f ; -webkit-box-shadow : inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px # 7d8e8f; padding: 10px;)

C'est tout, pour un exemple ascétique, un minimum bien suffisant. Mais après tout, nous ne serons pas du tout nous, si nous n'accrochons pas au moins quelques petits pains, et il vaut mieux que l'utilisateur indique visuellement où cliquer.
Dans le deuxième exemple, j'ai ajouté un simple symbole sous la forme d'un plus, qui indique clairement que quelque chose d'autre est caché ici, lorsqu'on clique dessus, il se transforme instantanément en moins, et aux blocs cachés avec du contenu, j'ai foutu une petite animation quand il apparaît, et tout cela est exclusivement avec l'aide magique de CSS3.

2. CSS

/ * masquer les cases à cocher et les blocs de contenu * /... cacher,. masquer + étiquette ~ div (affichage : aucun ;) / * type de texte d'étiquette * /... masquer + étiquette (marge : 0 ; remplissage : 0 ; couleur : vert ; curseur : pointeur ; affichage : bloc en ligne ;) / * type de texte d'étiquette avec commutateur actif * /... masquer : coché + étiquette (couleur : rouge ; bordure en bas : 0 ;) / * lorsque la case à cocher est active, affiche les blocs avec le contenu * /... hide : coché + label + div (affichage : block ; background : #efefef ; - moz- box- shadow : inset 3px 3px 10px # 7d8e8f ; - webkit- box- shadow : inset 3px 3px 10px # 7d8e8f ; box- shadow : inset 3px 3px 10px # 7d8e8f ; marge gauche : 20 px ; rembourrage : 10px ; / * un peu d'animation lorsqu'elle apparaît * /- webkit- animation : fade easy- in 0.5s ; - animation moz : facilité de fondu en 0,5 s ; animation : atténuation du fondu en 0,5 s ; ) / * animation lorsque des blocs cachés apparaissent * /@ - moz- keyframes fondu (de (opacité : 0;) à (opacité : 1)) @ - webkit- keyframes fondu (de (opacité : 0 ;) à (opacité : 1)) @ keyframes fondu (de (opacité : 0;) à (opacité : 1)). hide + label : avant (couleur de fond : # 1e90ff ; couleur : #fff ; contenu : " \ 002B "; bloc de visualisation; flotteur : gauche ; taille de la police : 14px ; font-weight : gras ; hauteur : 16px ; hauteur de ligne : 16px ; marge : 3px 5px ; text-align : centre ; largeur : 16px ; - webkit- border-rayon : 50 % ; - moz-border-rayon : 50 % ; rayon de la frontière : 50 % ; ). hide : coché + libellé : avant (contenu : " \221 2" ; }

/ * masquer les cases à cocher et les blocs avec le contenu * / .hide, .hide + label ~ div (affichage : aucun ;) / * texte type label * / .hide + label (marge : 0 ; remplissage : 0 ; couleur : vert ; curseur : pointeur ; affichage : inline-block ;) / * vue du texte du label lorsque le switch est actif * / .hide : coché + label (couleur : rouge ; border-bottom : 0 ;) / * lorsque la case à cocher est active, afficher les blocs avec le contenu * /. masquer : coché + étiquette + div (affichage : bloc ; arrière-plan : #efefef ; -moz-box-shadow : inset 3px 3px 10px # 7d8e8f; -webkit-box-shadow : inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px # 7d8e8f; margin-left: 20px; padding: 10px; / * un peu d'animation quand il apparaît * / -webkit-animation: fade easy-in 0.5s; -moz-animation : fondu enchaîné 0.5s; animation: fondu enchaîné 0.5s;) / * animation lorsque des blocs cachés apparaissent * / @ -moz-keyframes fondu (de (opacité: 0;) à (opacité: 1)) @ - webkit-keyframes fondu (de (opacité : 0 ;) à (opacité : 1)) @keyframes fondu (de (opacité : 0 ;) à (opacité : 1) )) .hide + étiquette : avant (couleur de fond : # 1e90ff ; couleur : #fff ; contenu : "\ 002B" ; bloc de visualisation; flotteur : gauche ; taille de la police : 14px ; font-weight : gras ; hauteur : 16px ; hauteur de ligne : 16 px ; marge : 3px 5px ; text-align : centre ; largeur : 16px ; -webkit-border-radius : 50 % ; -moz-border-rayon : 50 % ; rayon de bordure : 50 % ; ) .hide : coché + libellé : avant (contenu : "\ 2212";)

Au dire de tous, la méthode est sans aucun doute bonne, mais comme toujours, sans surprise du tout, des problèmes surviennent avec l'éternel ralentissement en cours, le navigateur IE, la pseudo-classe vérifié ne prend en charge que les versions 9e et supérieures de ce navigateur. Pour les anciennes versions d'IE, tout reste pareil, il faut utiliser javascript.

En utilisant des cases à cocher cachées, vous pouvez facilement implémenter des blocs de style, des curseurs, des galeries et plus encore.

Avec tout mon respect, André

Sur presque tous les sites, vous pouvez voir des boutons - Plus, Informations, Ouvrir / Masquer les informations, etc. Lorsque vous cliquez dessus, un bloc avec les informations correspondantes s'ouvre en douceur. Comment mettre cela en œuvre ?

Assez simple. Utilisation de JS (bibliothèque jQuery). Connectons-le depuis le serveur Google :

Maintenant tout l'exemple. Afin de ne pas le démonter en plusieurs parties et de ne pas vous embrouiller, je commenterai tous les points principaux de celui-ci.

Ouvrir/masquer les informations

N'oubliez pas que dans cet exemple il y a une connexion à distance jQuery. L'exemple ne fonctionnera pas sur un réseau local sans accès Internet.
Voyons le résultat de l'ouverture et du masquage d'un bloc dans jQuery :

Comment créer des spoilers dans jquery ou plusieurs blocs ouverts/fermés ?

En raison de nombreuses demandes de lecteurs, je crée une section séparée avec un exemple et des fichiers à télécharger. Si vous avez plusieurs blocs de spoiler qui doivent être ouverts et fermés en douceur dans jquery, si vous avez besoin de commandes pour tout fermer ou tout ouvrir, consultez l'exemple ci-dessous :

L'exemple est entièrement assemblé. Tout ce dont vous avez besoin est une connexion Internet pour charger jQuery à partir des bibliothèques Google.

Souvent dans nos projets, nous avons besoin de lier une action spécifique à une action utilisateur. Par exemple, lorsque vous faites un clic gauche sur une certaine diva (bloc), la couleur de ce bloc change. En général, appuyer sur le bouton gauche de la souris est appelé clic. Pour gérer cet événement, javascript et jquery sont principalement utilisés, mais il est également possible de suivre le clic en utilisant css. Nous en parlerons dans cet article. Bien sûr, une question légitime se pose, pourquoi suivre en utilisant le clic css, tout fonctionne bien avec javascript. Mais si js est désactivé dans le navigateur de l'utilisateur, la fonctionnalité du site ne sera pas complète et le clic css fonctionnera toujours. Il existe plusieurs méthodes pour gérer l'événement de clic css. Le premier est "vérifié"

La méthode "vérifiée"

Tout d'abord, écrivons du code html et css.

.box (largeur : 200px ; hauteur : 100px ; background-color : crimson ; position : relative ; z-index : -10 ; / * en faire le calque le plus bas * / margin : 0 auto ; margin-top : 50px ;) . noncheck1 , .noncheck2, .noncheck3 (largeur : 200px ; hauteur : 100px ; affichage : bloc ; position : relative ; couleur d'arrière-plan : gris clair ; z-index : 10px ; / * couche la plus haute * /) .check (largeur : 200px ; hauteur : 100px ; affichage : bloc ; position : absolue ; / * décalage par rapport au calque supérieur grâce à la position absolue * / haut : 1px ; gauche : 1px ; z-index : -1 ; / * calque intermédiaire * /) étiquette (/ * bouton * / taille de police : 23px ; affichage : bloc ;) entrée (/ * masquer la case à cocher * / affichage : aucun ;) entrée : cochée ~ .box .noncheck1 (/ * masquer la couche supérieure lorsqu'elle est cochée, le texte du milieu le calque est visible et le calque du bas * / affichage : aucun ;)

Jetons un œil au code. Nous avons trois blocs .box, .noncheck1, .check. Ils sont tous positionnés les uns par rapport aux autres, donc le bloc .check est sous .noncheck1. Je n'ai pas mis de boutons CSS dans la liste car ce n'est pas important. Et maintenant, nous commençons à traiter la méthode "vérifiée". La méthode est basée sur l'utilisation de l'élément checkbox et de son attribut checké. Nous cliquons sur la case à cocher et son état passe à coché. À cet événement, en utilisant les sélecteurs css "~" ou "+", nous lions le changement de quelque chose. Par exemple, changer la couleur du texte ou de l'arrière-plan d'un certain élément. Dans l'exemple, nous sélectionnons la case à cocher et dans div.box div.noncheck1 devient invisible (affichage : aucun), nous pouvons voir div.check. Afin de concevoir le commutateur d'état d'arrière-plan comme un bouton, nous attribuons une étiquette à notre case à cocher et créons un bouton à partir de celle-ci. Maintenant, nous n'avons plus besoin de la case à cocher (nous avons un bouton) et nous la cachons (affichage : aucun)

La méthode "cible"

.noncheck2 : cible (affichage : aucun ;)

La méthode cible fonctionne selon ce principe. Nous créons un bouton .butt2 avec un lien On. Dans le lien, nous attribuons le hashtag "#On". Lorsque vous cliquez sur le lien sous forme de bouton avec un hashtag, vous accédez au div avec id = "On". Cette div atteint la cible. La pseudo-classe cible est activée. Nous avons masqué le div pour cet événement. Noncheck2 également en raison de l'affichage : aucun. Lorsque vous cliquez sur un autre bouton de lien, le div quitte la cible, car la cible passe à un autre bloc. Div.noncheck2 apparaît à nouveau.

La méthode "tabindex"

.butt4 : focus ~ .box .noncheck3 (affichage : aucun ;)

Cette méthode est basée sur l'utilisation de l'attribut tabindex. Cela réside dans le fait que nous pouvons définir le focus d'entrée sur certains éléments de la page Web en utilisant tabindex. L'élément reçoit un événement focus (.butt4: focus), qui peut être géré à l'aide de css. Nous utilisons le sélecteur de voisin "~" pour définir l'élément .noncheck3 à afficher : aucun lorsque nous avons un événement .butt4 : focus. Lorsque notre focus passe du bouton à un autre élément de la page, noncheck3 revient à son état d'origine.