La méthode «hide» permet de rendre invisible un élément, la méthode «show» permet de rendre visible un élément préalablement invisible.


$('#mon_id').hide()

rendra invisible l'élément ayant pour id «#mon_id».

À faire vous-même 5.1

Créer les 2 fichiers suivants :

index.html


<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
 <button id="affiche">Cliquez ici</button>
 <ul>
 </ul>
</body>
</html>

script.js


$(function(){
 var mesFruitsTab=["banane","pomme", "ananas","pêche","fraise"];
 $('ul').hide();
 var isVisible=false;
 for (var i=0;i<mesFruitsTab.length;i++){
  $('ul').append('<li>'+mesFruitsTab[i]+'</li>');
 }
 $('#affiche').on('click',function(){
  if (isVisible==false){
   isVisible=true;
   $('ul').show();
  }
  else{
   isVisible=false;
   $('ul').hide();
  }
 });
});

Etudier cet exemple

Décrire le résultat attendu. Quel est le rôle de la variable isVisible. Tester cet exemple.