Learn how to build and design websites with our tutorials.

jQuery Show and Hide Effects Tutorial

jQuery has several methods that allow you to easily hide and show HTML elements.

View Tutorial Contents


jQuery .hide() And .show() Methods

The jQuery .hide() and .show() methods allow you to hide and show HTML elements.

The example code below shows you how to hide and show HTML elements using the .hide() and .show() methods.


<!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>

<script>

$(document).ready(function(){
	$("#button1").click(function(){
		$("p").hide();
	});
	$("#button2").click(function(){
		$("p").show();
	});
});

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

The .hide() and .show() methods will be applied to the paragraph below so that you can see them in action.

This is a paragraph.


jQuery .toggle() Method

The jQuery .toggle() method is a combination between the .hide() and .show() methods. The jQuery .toggle() method toggles between hiding and showing selected HTML elements.

The example code below shows you how to hide and show HTML elements using the .toggle() method.


<!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>

<script>

$(document).ready(function(){
	$("#button1").click(function(){
		$("p").hide();
	});
});

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

The .toggle() method will be applied to the paragraph below so that you can see it in action.

This is a paragraph.