jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
Example
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
Syntax:
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).
The following example demonstrates the speed parameter with hide():
Example
$(“p”).hide(1000);
});
jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown:
Example
$(“p”).toggle();
});
Syntax:
The optional speed parameter can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>
<p>If you click on the “Hide” button, I will disappear.</p>
<button id=”hide”>Hide</button>
<button id=”show”>Show</button>
</body>
</html>
