Create jQuery Basic Hide Show Function

by Hiroshi on October 31, 2008

in JQuery

In this example we will see that how we can generate a simple hide show script using jQuery. Consider the following example. We have included jQuery latest file. Then we have created three functions for hide, show and toggle and we have attached these functions with classes on Click Event of mouse and our target is h1 heading text.

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
 
  $(document).ready(function() {
   $('.hideh1').click(function(){
     $('div.showhide,h1').hide();
   });
   $('.showh1').click(function(){
     $('div.showhide,h1').show();
   });
   $('.toggleh1').click(function(){
     $('div.showhide,h1').toggle();
   });
 });
 
</script>
</head>
<body>
<h1>You can hide and unhide this Heading by clicking the links below</h1>
 
<div><a href="#" class="hideh1">Hide</a></div>
<div><a href="#" class="showh1">UnHide</a></div>
<div><a href="#" class="toggleh1">Toggle</a></div>
 
</body>
</html>

Download Example Show Hide Via jQuery

Related Posts

Previous post:

Next post: