Modifier l’apparence d’une page avec .addClass(), .removeClass() et .toggleClass()

Les deux fonctions .addClass() et .removeClass(), facile à utiliser, permettent déjà des intéractions puissantes avec l’utilisateur en faisant apparaitre et disparaitre des éléments, modifier leur tailles, couleur, typos.

Précédent | 7/7

Le but de ces deux fonctions est simple : ajouter ou retirer une classe css à un élément html. Pourtant, bien utilisées, ces fonctions sont suffisantes pour un bon nombre d’intéractions utilisateur.

Faire apparaitre/disparaitre un élément

jQuery va permettre d’agir sur la page html et de tirer parti du code css. La difficulté est donc de bien construire la triade (html-css-javascript) sans quoi rien ne se passera.

Dans ce premier exemple, nous allons faire apparaitre ou disparaitre un texte en cliquant sur son titre, comme dans un FAQ.

Le code html

<div class="qr">
<h2>une question ?</h2>
<div class="texte">
Voici sa réponse
</div>
</div>

A noter que l’on peut employer n’importe quel code html, du moment que la question et la réponse soit dans des balises qui se suivent.

Si ce code est affiché, on peut voir une page avec un titre et un texte. Le code est donc dégradable : la page donne toute l’information nécessaire si javascript n’est pas disponible.

Le code Css

   .jq_actif h2 {
       cursor:pointer;
   }
   .jq_actif .texte {
       display:none;
   }

Ce code ne modifie rien à l’esthétique de la page. Aucun élément ne comporte actuellement de class ".jq_actif". Pour changer le comportement par défaut de la page, on emploiera un code css traditionnel :

   h2 {
       color:red;
   }
   .texte {
       font-family:arial,sans-serif;
   }

Enfin, le code javascript
Ce code, placé généralement dans le head, doit être précédé de l’inclusion de la librairie jquery.

<script>
 $(document).ready(function(){ // quand la page est lue par le navigateur
   $("article").addClass("jq_actif"); // ajouter la classe "jq_actif" aux articles
   $("article h2").click(function(){ // quand les tags h2 sont cliqués
       $(this).parent().toggleClass("jq_actif"); // ajouter ou retrancher la classe jq_actif au parent de l'élément.
       });
   });  
</script>

Le code ajoute au chargement de la page la classe "jq_actif" à toutes les balises article. La css ".jq_actif .texte" s’applique alors à tous les éléments comportant la classe ".texte" contenu dans ces articles, qui les cache (display:none) ;
On associe ensuite l’action toggleClass() au clic des éléments h2. ToggleClass() ajoute une classe à un élément si il ne la possède pas, et lui enlève si l’élément l’a. C’est donc un interrupteur "on/off".

Exemple plus complet avec transition
Voici un exemple avec en plus une navigation employant les transitions css3, permettant de faire apparaitre un menu par glissement.

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<script src="jquery.js"></script>
<script>
 $(document).ready(function(){
   $("article, nav").addClass("jq_actif");
   $("article h2, nav h2").click(function(){
       $(this).parent().toggleClass("jq_actif");
       });
   });  
</script>
<style>
   h2 {
       color:#333;
   }
   .texte {
       font-family:arial,sans-serif;
   }
   .jq_actif h2 {
       cursor:pointer;
   }
   article.jq_actif .texte {
       display:none;
   }
   /* navigation */
   ul, li { padding:0; margin:0; list-style-type:none; }
   nav {
          
           width:96%;
           padding:2%;
           background-color:#999;
           color:#fff;
   }
   nav.jq_actif ul {
           height:0;
          
   }
   nav ul {
           height:100px;
           transition-property: height;
           transition-duration: 0.5s;
           overflow:hidden;
   }
   
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Un lien</a></li>
<li><a href="#">Un lien</a></li>
<li><a href="#">Un lien</a></li>
<li><a href="#">Un lien</a></li>
<li><a href="#">Un lien</a></li>
</ul>
</nav>
<h1>Test jquery avec .addClass(), .removeClass() et toggleClass()</h1>

</header>
<section>
<article class="qr">
<h2>une question ?</h2>
<div class="texte">
Voici sa réponse
</div>
</article>

<article class="qr">
<h2>une question ?</h2>
<div class="texte">
Voici sa réponse
</div>
</article>

</section>
<footer>
Footer
</footer>
</div>
</body>
</html>