CodesJava

Easy learning with example program codes

jQuery show()

Showing is another effect of jQuery. The jQuery library provides the show() method to serve this purpose.

show() method is used to show the selected elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#hide").click(function(){
    	$("p").hide();
	});
	$("#show").click(function(){
    	$("p").show();
	});
});
</script>
</head>
<body>
 
<p>Click on the "Hide" button and I will disappear.</p>
<p>Click on the "Show" button and I will reappear.</p>
 
<button id="hide">Hide</button>
<button id="show">Show</button>
 
</body>
</html>

Try it

JS Bin on jsbin.com

show() method can also include some other parameters to make the effect of showing the selected elements more specific.

Syntax:

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

Speed:

  • Speed is an optional parameter that specifies the speed of the delay in reappearing the selected elements.
  • It can accept string values: “slow”, “fast”, or in milliseconds, same as in case of hide() method.
  • The default speed is 400 milliseconds.
  • On using “slow” keyword as the value for the speed parameter, the compiler take it as 600 milliseconds.
  • Similarly, on using “fast” keyword as the value for the speed parameter, the compiler take it as 200 milliseconds.

Callback:

  • Callback is also an optional parameter.
  • Callback is the function to be executed once the show() method’s execution is complete.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#hide").click(function(){
    	$("p").hide("fast");
	});
	$("#show").click(function(){
    	$("p").show("slow");
	});
});
</script>
</head>
<body>
 
<button id="hide">Hide</button>
<button id="show">Show</button>
 
<p>Click on the "Hide" button and I will disappear.</p>
<p>Click on the "Show" button and I will reappear.</p>
 
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status