Objectives and outcomes

In this tutorial we are going to learn about jquery show-hide effect. We can show and hide DOM elements using jquery show() and hide() methods. Example for the same is shown below:



Syntax for method

$(selector).show(speed,callback);
$(selector).hide(speed,callback);

You can learn about selector in our Jquery selector tutorial while the speed parameter defines the pace of the effect. It can have values like "slow", "fast" and milliseconds. callback parameter is a function which is executed after the show or hide complete its execution.
Note: Both the parameters are optional.




Click the buttons and observe the effect






HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Show-hide effect</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
<p>Click the buttons and observe the effect</p><br/>
</div>
<br/>
<button id="butn1">Hide</button><br/>
<button id="butn2">Show</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
background-color:#585858;
color:#fff;
font-size:24px;
height:100px;
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').hide();
});
		
$('#butn2').click(function()
{
$('#example').show();
});
});
</script>