Lesson 7 hide() and show() Methods

❮ Previous Lesson Next Lesson ❯

There are many jQuery methods that you can use to perform some tasks on the HTML elements once you have selected them.The jQuery method is usualy written with a period in front of it name, as shown below:

 .jQuery_method()

7.1 The hide() Method

The hide() method is used to hide HTML elements. We have seen its application in previous lessons.

Example 1

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#header1").click(function(){
         $("#header1").hide();
    });
});
</script>
</head>
<body>
<h3 id="header1"> Don't Leave Me</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Click heading "Hide Me" to hide the heading.

Hide Me

Paragraph 1

Paragraph 2

*Note: the html method is to change the content of an element, in this case the element h3 with id 'header1'

7.2 The show() Method

The show() method is used to show hidden HTML elements

Example 2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
         $("#header2").hide();
    });
	$("#btn2").click(function(){
         $("#header2").show();
    });
});
</script>
</head>
<body>
<h3 id="header2"> Don't Release Me</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Click the buttons to see the effects.

Hide or Show Me

7.3 The Speed Parameters

We can also use the speed parameters to control the speed for hiding and showing for the hide() and show() methods. The parameters are 'slow', 'fast' or milliseconds.

Example 3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
         $("#header3").hide(slow);
    });
	$("#btn4").click(function(){
         $("#header3").show(2000);
    });
	

});
</script>
</head>
<body>
<p>Click the buttons to see the effects.</p>
<h3 id="header3">Hide or Show Me</h3>
<button id="btn3">Click to hide heading</button></br><br>
<button id="btn4">Click to Show heading</button>
</body>
</html>

Click the buttons to see the effects.

Hide or Show Me

7.4 The toggle() Method

The toggle() method let's the user toggle between the hide() and show() methods.

Example 4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn5").click(function(){
         $("#header4").toggle();
    });
});
</script>
</head>
<body>
<h3 id="header4">Hide and Show Me</h3>
<button id="btn5">Click to hide and show me</button>
</body>
</html>

Hide and Show Me

❮ Previous Lesson Next Lesson ❯