JQuery Hide and Show

From CoderLearner
Jump to: navigation, search

jQuery hide and show function

The $.hide() and $.show() function use to hide and show HTML element respectively.

Syntax

	$("#hide").click(function(){
		$("#test499").hide();
	});			
	$("#show").click(function(){
		$("#test499").show();
	})	

Example 1

<!DOCTYPE html>
<html>
   <head>
      <title>odd even</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $("#hide").click(function(){
               $("#test499").hide();
            })	;			
            $("#show").click(function(){
               $("#test499").show();
            })	;			
         });
      </script>
   </head>
   <body>
      <a href="#" id="hide">Hide</a> 
      <a href="#" id="show">Show</a>
      <p id="test499">
         Great leader is a great follower.
      </p>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>