menu

Showing posts with label hide(). Show all posts
Showing posts with label hide(). Show all posts

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.