menu

Friday, November 21, 2014

Using Show() and Hide() methods in JQuery

show() and hide() methods:

     You can use show and hide methods of a JQuery object to change the visibility of it like in the following example. You can check the visibility with is(':visible') method of JQuery.

Example:

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() {
     $('#myButton').click(function () { 
if($('#myLink').is(':visible'))
  $('#myLink').hide();
else 
  $('#myLink').show();
        return true;
     });   
   });
  </script>
 </head>
 <body>
   <input type="button" id="myButton" value=" show/hide link">
   <br/>
   <a id='myLink' href='#' onClick="myLink_onClick()">my link</a>
 </body>
</html> 

The screen will look like the following.


Using Show() and Hide() methods in JQuery
Figure 1

You can download the source code from here.  

No comments:

Post a Comment