Jquery show hide by id in Javascript - Java @ Desk

Wednesday, November 23, 2016

Jquery show hide by id in Javascript

Jquery show hide in Javascript

show and hide the UI elements using the id attribute of the html element.
hide() - Jquery method to hide the field
show() - Jquery method to show the field

To use the inbuilt function in JS, following library must be included in the HTML file
1) jquery.min.js

Here is the sample html code to show hide the image

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

<script type="text/javascript">

function showImage() {
 $("#processNewImage").show();
}
function hideImage() {
 $("#processNewImage").hide();
}
</script>

</head>
<body>
 <div style="height: 40px;"></div>

 <div>
  <button onclick="showImage();">Show Image</button>
  <button onclick="hideImage();">Hide Image</button>
 </div>

 <div style="height: 40px;"></div>

 <div>
  <img src="images/giphy.gif" id="processNewImage"
   name="processNewImage">
 </div>
</body>
</html>






No comments:

Post a Comment