Afficher ou masquer une div en JQuery

septembre 28, 2019février 10, 2020 Thomas Aucun commentaire

Dans ce tutoriel nous allons découvrir comment afficher et masquer l’élément(DIV) lors d’un clic de souris à l’aide de jQuery, en utilisant la méthode toggle(). En cliquant sur la souris, l’élément(DIV) est visible et en cliquant une nouvelle fois sur l’élément(DIV), elle se cache.

Exemple pour afficher ou masquer une div en JQuery

<!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 l'élément(DIV)</div>
      <div class="menu" style="display: none;">
         <ol>
            <li>JavaScript</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JQuery</li>
         </ol>
      </div>
   </body>
</html>