How to show/hide a div with a slide effect in jQuery

December 31, 2020 admin

In this tutorial, we are going to see how to show/hide a (DIV) element on mouse click with a slide effect in jQuery. Use the toggle() method. By clicking the mouse, the (DIV) element is visible and by clicking again on the (DIV) element it hides.

Script: Show/hide a div with a slide effect in 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">Click here to show or hide the DIV element.</div>
      <div class="menu" style="display: none;">
         <ol>
            <li>JavaScript</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JQuery</li>
         </ol>
      </div>
   </body>
</html>