Astuce pratique pour contrôler des class CSS en JS pour les graphistes et web designers

Découvrez une petite astuce simple et rapide qui va vous permettre de gérer des interactions en css avec une simple ligne JS.
Si vous êtes web designer ou graphiste et que vous débutez en intégration, il arrive souvent de vouloir réaliser un effet tout simple comme déplier un menu sans trouver l'astuce qui pourra répondre à votre besoin.

Nous avons décidé de réaliser un petit tutoriel que vous pourrez réutiliser dès que vous en avez besoin, afin de créer des interactions pour votre site web. Nous avons conçu deux exemples illustrés qui vont vous permettre d'ajouter une class à n'importe quel élément de votre site afin de lui changer ses caractéristiques. 

Une ligne simple pour ajouter une class

Cette astuce peut vous permettre de déclencher une animation changement de couleur, déplacement d'un élément, tout ce qui peut être changé en CSS. Découvrez nos exemples ci-dessous :

See the Pen zeCyo by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

 

Pour réaliser ce type d'effet, nous avons besoin de manipuler une seule ligne en JS, hors importation de la librairie jQuery : 

$(".mon_bouton").on("click", function(){$(".box").toggleClass("active")});

Dans la 1er parenthèse, il suffit de nommer l'élément qui servira d'interaction (.mon_bouton), c'est lorsque l'on clique sur lui qu'on lance le JS. Dans la seconde parenthèse on indique l'élément (.box) qui prendra la nouvelle class. Enfin la dernière parenthèse permet de nommer la class qui sera ajoutée, ici .active à l'élément .box afin de lui donner des nouvelles caractéristiques en CSS.
On aurait également pu utiliser des id avec #mon_bouton ou #box, cela fonctionne aussi.

On peut observer le résultat sur notre exemple présent sur CodePen : codepen.io/B_Sanchez/pen/zeCyo/

Pour aller plus loin 

Si vous souhaitez aller plus loin on peut ajouter ;$(this).toggleClass("active") à notre ligne afin d'ajouter la class .active à l'élément qui fait l'interaction, qui est donc .mon_bouton.

Le résultat donne : 

$(".mon_bouton").on("click", function(){$(".box").toggleClass("active");$(this).toggleClass("active")});

Vous pouvez également changer la fonction "click" par un autre événement JS, voici un article sur le sujet : Javascript les événements

Quelques points pour l'intégration 

Si vous souhaitez intégrer cette astuce vous pouvez analyser notre exemple sur CodePen, au niveau du CSS nous avons utilisé du Sass et Font-Answome pour intégrer les différents pictogrammes. Pour le JS nous appelons la librairie JQuery & JQuery UI.

Nous vous proposons également de télécharger le fichier HTML et CSS pour réaliser cet effet en local si c'est plus simple pour vous. Il faut bien intégrer les lignes de JS à la fin de votre HTML pour que le code soit lu dans le bon ordre.
Pour vous aider à faire les tests, vous pouvez utiliser la console de votre navigateur afin de voir apparaître la class "active" quand vous cliquez sur l'élément. 

Nous espérons que cette astuce pourra vous aider et que nous avons été assez clairs dans notre présentation qui se veut pour une cible de graphistes et web designers débutant en intégration principalement.

N'hésitez pas à partager cet article si cela peut aider vos connaissances et à nous laisser un commentaire si vous avez des questions.