In JQuery show () method is very attractive method. By using this method we can show element on page. In this article I am trying to give example which demonstrate how we can implement show () method in page. I have three images on page and I want to give functionality to user that they can hide and show images. If user will click on hide button then all images will hide from page and if user wants to see images then user can click on show button as shown below:
Syntax: $(“element”).show (“fast, medium, slow”)
Code:
<head>
<title>JQuery Show</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button#hide").click(function() {
$("img").hide("medium"); // hide function will hide all images from page
});
$("button#show").click(function() {
$("img").show("fast"); // show function will show all images on page
});
});
</script>
</head>
<body>
<h2>Using show method in JQuery</h2>
<table width="300" border="2" bgcolor="blue">
<tr>
<td>
<table width="400" bgcolor="#cccd44">
<thead>
<tr>
<th>
Koala
</th>
<th>
Lighthouse
</th>
<th>
Penguins
</th>
</tr>
</thead>
<tr>
<td align="center">
<img src="Koala.jpg" width="100" height="50" />
</td>
<td align="center">
<img src="Lighthouse.jpg" width="100" height="50" /></td>
<td align="center">
<img src="Penguins.jpg" width="100" height="50" /></td>
</tr>
<tr>
<td align="center" colspan="3">
<button id="show">
Show</button>
<button id="hide">
Hide</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Screenshot
If user clicks on hide button all images will hide from page as shown below:
Screenshot
If user wants to see images then user can click on show button then all images will visible as shown below:
Screenshot
Anonymous User
15-Apr-2019Thank You.