jQuery Slide

The slideUp(), slideDown(), and slideToggle() methods are used to create sliding effects on elements.
They are built-in functions and can be used easily.

slideUp() Method

Used to gradually hide selected elements by decreasing their height.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery SlideUp Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: red;
    }
  </style>
</head>
<body>

  <button id="slideUpBtn">Slide Up Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Slide up the paragraph on button click
      $("#slideUpBtn").click(function(){
        $("#myParagraph").slideUp();
      });
    });
  </script>

</body>
</html>

slideDown() Method

Used to gradually display selected elements by increasing their height.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery SlideDown Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: blue;
      display: none; /* Initially hide the paragraph */
    }
  </style>
</head>
<body>

  <button id="slideDownBtn">Slide Down Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Slide down the paragraph on button click
      $("#slideDownBtn").click(function(){
        $("#myParagraph").slideDown();
      });
    });
  </script>

</body>
</html>

slideToggle() Method

Used to toggle between sliding down and sliding up of selected elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery SlideToggle Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: green;
    }
  </style>
</head>
<body>

  <button id="slideToggleBtn">Slide Toggle Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Toggle between sliding down and sliding up the paragraph on button click
      $("#slideToggleBtn").click(function(){
        $("#myParagraph").slideToggle();
      });
    });
  </script>

</body>
</html>

Quick Recap - Topics Covered

jQuery Slide

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message