How to do Content hide and show using Single Button Java Script?

on October 25, 2016

Post Views: 1,386

Content Hide Show using Single Button Java Script

In this tutorial, We will show you how to write script to perform Content Hide Show using Single Button Java Script. The HTML and Java Script files are attached here. The below code has been tested and output is published in same article.

HTML Code

<html>
<head>
<title>Content hide and show using Single Button in Java Script</title>
</head>
<body>
<h1>Content hide and show using Single Button in Java Script</h1>
<hr>
<!-- Unique Id for Content Division -->
<div id="myContent">
<!-- Change the path of images file (ie: src="your image file path") -->
<img src="myImage.jpg" alt="Image Hide& Show Example"/>
</div>
<hr>
<!-- Initial value of button is 'Hide' passing current button element as argument using 'this' keyword for function hide_show(this) . -->
<input type="button" value="Hide" onclick="hide_show(this);">
</body>
<!-- linking the script file to access the function -->
<script type="text/javascript" src="main.js"></script>
</html>

main.js

The function hide_show() takes argument as HTML button element(object). based on the object value attribute the function doing hiding and showing the particular division using the style.visibility = “visible” or “hidden” accordingly.

function hide_show(obj) {
if(obj.value == "Show") { 
document.getElementById('myContent').style.visibility = "visible";
obj.value = "Hide";
} else if(obj.value == "Hide") {
document.getElementById('myContent').style.visibility = "hidden";
obj.value = "Show";
}
}