Learn how to build and design websites with our tutorials.

jQuery Sliding Effects Tutorial

jQuery has several methods that allow you to easily slide selected HTML elements up and down so that they become either hidden or visible.

View Tutorial Contents


jQuery .slideDown() Method

The jQuery .slideDown() method slides down selected HTML elements that are hidden to show them.

The example code below shows you how to apply the .slideDown() method to a hidden HTML element. Notice that the selected HTML element is hidden with jQuery first, so that you can see the .slideDown() method applied.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button>Slide Down</button>

<script>

$(document).ready(function(){
	$("p").hide();
	$("button").click(function(){
		$("p").slideDown();
	});
});

</script>
</body>
</html> 

The jQuery .slideDown() method will be applied to the paragraph that is hidden below.

This is a paragraph.


jQuery .slideUp() Method

The jQuery .slideUp() method slides up a selected HTML element until it is hidden.

The example code below shows you how to apply the .slideUp() method to an HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button>Slide Up</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("p").slideUp();
	});
});

</script>
</body>
</html> 

The jQuery .slideUp() method will be applied to the paragraph below.

This is a paragraph.


jQuery .slideToggle() Method

The jQuery .slideToggle() method is a combination of the .slideUp() and the .slideDown() methods. It toggles between sliding selected HTML elements up and down.

The code example below shows you how to apply the jQuery .slideToggle() method to a selected HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button>Toggle</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("p").slideToggle();
	});
});

</script>
</body>
</html> 

The jQuery .slideToggle() method will be applied to the paragraph below.

This is a paragraph.