How to Show and Hide a Element with jQuery
- Get link
- X
- Other Apps
If you already studied or maybe you are studying javaScript you will know about jQuery. jQuery is a programing language to help us to use and apply javaScript in website. One of the uses jQuery is to show and hide a element. In this opportunity i will show you how to show and hide a picture with jQuery.
Just Copy and paste the script bellow
<html>
<head>
<title>Show and hide a element with jQuery</title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script>
//early initiation of use jQuery
$(document).ready(function(){
//First, hide the element
$('.picture').hide();
//When the button show is clicked, the picture is showed
$('.display').click(function(){
$('.picture').show();
});
//When the button hide is clicked, the picture is hided
$('.hide').click(function(){
//hide the element
$('.picture').hide();
});
});
</script>
</head>
<body>
<input class="show" type="button" value="Show" />
<input class="hide" type="button" value="Hide" />
<div class="picture">
<img src="image.png" />
</div>
</body>
</html>
After that, you have to input your picture's source to image.png. Changeimage.png with your picture's source
Good luck
- Get link
- X
- Other Apps
Comments