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

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>

Result
Click here to show or hide the DIV element. JavaScript HTML CSS JQuery

Script: Show/hide a div with a slide effect in jQuery

You May Also Like

How to detect a click on iframe in JQuery

jQuery slideup() slidedown() and slidetoggle() Example

Auto-update DIV content while typing in textarea with jQuery

Leave a Reply Cancel reply