jQuery : cacher/montrer un bloc par simple clic

tutoriel jQuery : cacher/montrer un bloc par simple clic

Niveau
  1. Débutant
jQuery


Ce petit tutoriel n'a pas vocation à vous apprendre à utiliser jQuery mais simplement à vous montrer comment cette bibliothèque JavaScript fonctionne.
Vous pouvez découvrir de manière plus approfondie dans ce tutoriel : jQuery : formation vidéo avec Pierre Giraud (cocoriweb.community)

Le principe est d'appeler la bibliothèque JQuery dans un simple fichier HTML avec un CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Puis on utilise ce petit script jQuery pour activer la propriété #show sur le bloc à cacher, ici menu
JavaScript
$(document).ready(function(){
            $('#show').click(function() {
            $('.menu').toggle("slide");
        });
});

On crée notre fichier HTML et on intègre le CDN et notre script jQuery
HTML
<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
             $('#show').click(function() {
               $('.menu').toggle("slide");
             });
         });
      </script>
   </head>
   <body>
      <div id="show">Cliquez ici pour afficher ou masquer le bloc liste</div>
      <div class="menu" style="display: none;">
         <ol>
            <li>Bonjour</li>
            <li>Comment allez-vous ?</li>
            <li>Moi ça va</li>
            <li>Au revoir</li>
         </ol>
      </div>
   </body>
</html>

On crée un petit CSS pour habiller un peu notre page:
CSS
#show {
  background: black;
  color: white;
  padding: 20px;
}

.menu {
  border: 2px solid black;
}

Et c'est tout, notre petit code fonctionne, vous pouvez le vérifier ci-dessous
Auteur
Anthony
Affichages
132
Publication
Mise à jour
Notation
5.00 étoiles(s) 1 note(s)

Évaluations récentes

Excellent ce petit tuto, je vais m'en servir sur mon site ça fera au moins un effet sympa au milieu de mon HTML de base !! ;-)
Haut