Create jQuery Basic Hide Show Function
Oct 31, 2008 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
Tags: JQuery
Try Random Style!
drajendra Says:
thank u very much nice and simple.