jQuery Slide

❮ Previous Next ❯

jQuery Slide Effects

The jQuery slide methods are used to create a sliding effect on elements.

They smoothly expand or collapse content up and down.

This is incredibly popular for creating dropdown menus and accordions.

The slideDown() and slideUp() Methods

The slideDown() method is used to slide down (reveal) a hidden element.

The slideUp() method is used to slide up (hide) a visible element.

They accept the standard speed parameters: "slow", "fast", or milliseconds.

Slide Down and Up Example:

$("#flip-down").click(function(){
  $("#panel").slideDown("slow");
});

$("#flip-up").click(function(){
  $("#panel").slideUp("fast");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    #panel { padding: 40px; display: none; background-color: #e5eecc; text-align: center; border: solid 1px #c3c3c3; }
  </style>
</head>
<body>
  <button id="flip-down">Slide Down</button>
  <button id="flip-up">Slide Up</button>
  <div id="panel">Hello world! I am a sliding panel.</div>
  <script>
  $(document).ready(function(){
    $("#flip-down").click(function(){
      $("#panel").slideDown("slow");
    });
    $("#flip-up").click(function(){
      $("#panel").slideUp("fast");
    });
  });
  </script>
</body>
</html>

The slideToggle() Method

The slideToggle() method toggles between slideDown() and slideUp().

If the element has been slid down, slideToggle() will slide it up.

If the element has been slid up, slideToggle() will slide it down.

Slide Toggle Example:

$("#flip").click(function(){
  $("#panel").slideToggle("slow");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    #flip { padding: 10px; background-color: #4CAF50; color: white; text-align: center; cursor: pointer; }
    #panel { padding: 40px; display: none; background-color: #e5eecc; text-align: center; border: solid 1px #c3c3c3; }
  </style>
</head>
<body>
  <div id="flip">Click to slide toggle the panel</div>
  <div id="panel">Hello world! I am a sliding panel.</div>
  <script>
  $(document).ready(function(){
    $("#flip").click(function(){
      $("#panel").slideToggle("slow");
    });
  });
  </script>
</body>
</html>

Best Practices for Sliding Elements

For a smooth slide down effect, your HTML element should initially have display: none in CSS.

This prevents it from rendering on the page before you are ready to slide it into view.

Always test your slide speeds on mobile devices to ensure they aren't too slow.

Exercise 1 of 2

What is the most common use case for the slideToggle() method?

Creating dropdown menus and accordions Changing text color Sliding elements horizontally across the screen

Exercise 2 of 2

Which method hides a visible element by sliding it upwards?

slideHide() slideUp()

❮ Previous Next ❯

jQuery Basics

jQuery Effects

jQuery HTML

jQuery Traversing

jQuery AJAX

jQuery Misc