JQuery Hide/show methods


Hiding an HTML element using JQuery

Using JQuery one can hide desired HTML element using .hide() function.Web developers use this method to make web pages look much more attractive.For details see the undergiven example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com
/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<title>
JAVASCRIPT
</title>
</head>
<body>
<p id="hide">
HELLO WORLD.
</p>
<button id="hd">
Click Me!
</button>
<script>
$(document).ready(function(){
$("#hd").click(function(){
$("#hide").hide();
});
});
</script>
</body>
</html>
Here when user clicks button with id hde then element with id hided is hidden and when user clicks on button with id sde then same element is shown back.

Output:

HELLO WORLD.

Showing hidden HTML element using JQuery

Hidden HTML documents can be shown via JQuery with the help of function .show().
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com
/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<title>
JAVASCRIPT
</title>
</head>
<body>
<p id="hided">
HELLO WORLD.
</p>
<button id="hde">
Click to hide!
</button>
<button id="sde">
Click to show
</button>
<script>
$(document).ready(function(){
$("#hde").click(function(){
$("#hided").hide();
});
$("#sde").click(function(){
$("#hided").show();
});
});
</script>
</body>
</html>

Output:

HELLO WORLD.

Toggling between hide and show using single button

One can toggle between hide and show by using toggle option.This function is mentioned using .toggle() function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com
/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<title>
JAVASCRIPT
</title>
</head>
<body>
<p id="toggled">
This paragraph will be toggled.
</p>
<button id="tggl">
Click to toggle!
</button>
<script>
$(document).ready(function(){
$("#tggl").click(function(){
$("#toggled").toggle();
});
});
</script>
</body>
</html>

Output:

This paragraph will be toggled.

If you want to style buttons preffer our HTML and CSS tutorial.