Hiding and showing elements on the page

This page discusses - Hiding and showing elements on the page

Hiding and showing elements on the page

Hiding and showing elements on the page

     

Hiding and showing elements on the page

.hide( )

This method is used to hide the matched elements.

.show( )

This method is used to display the matched elements set.

Example :

Following code hide and show the text by button click :

jqHIdeShowText . html

<!DOCTYPE html>
<html>
<head>
  <style>
  span { background:#D8BFD8; padding:3px; float:left; }
  </style>
  <script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
	<button id="hidb">Hide</button>
  <button id="showb">Show</button>
  <div>

    <span>jQuery</span> <span>is</span> <span>easy</span> 
    <span>to</span> <span>use</span> <span>and</span> 
    <span>gives</span> <span>dynamic output..</span>

  </div>
<script>
    $("#hidb").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showb").click(function () {
      $("span").show(2000);
    });

</script>
</body>
</html>

Output :

Before clicking any button:

After clicking  'hide' button :

After clicking show button :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.