Hide/show Image by click
In this tutorial ,we will discuss about how to display image by click using jQuery.
In this tutorial ,we will discuss about how to display image by click using jQuery.
Hide/show Image by click
In this tutorial ,we will discuss about how to display image by click using
jQuery. In the below example, a image and two lines are given. By clicking on
upper line , it will hide the image and the line as well. But when we click on
remaining line , it will display the image again.
jqHideImageOnClick.html
<html>
<head>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body>
<img id="logo" src="logo.gif" alt="" width="200" height="50" />
<div id="myclick">
<font color="blue">
Click here to hide the logo
</font>
</div>
<div id="myclick1">
<font color="blue">
Click here to show the logo
</font>
</div>
<script>
$(document).ready(function() {
$('#myclick').click(function() {
$('#logo').hide('slow', function(){
$('#myclick').hide('slow', function(){
});
});
});
$('#myclick1').click(function() {
$('#logo').show('slow', function() {
});
});
});
</script>
</body>
</html>
|
OUTPUT
After click on upper line :
After click on above line :
Download Source Code
Click
here to see demo
