In this tutorial we will learn how to Hide and Show all Divs using JavaScript. For this we can use .getElementsByTagName() method along with for loop and .display property.
Table of Contents
HTML Code
HTML Code is given below, in this we have three div tags and a button tag with onclick event to trigger a JavaScript function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide/Show all Divs</title>
</head>
<body>
<div style="height:100px;margin:10px;background-color:red;">
</div>
<div style="height:100px;margin:10px;background-color:green;">
</div>
<div style="height:100px;margin:10px;background-color:blue;">
</div>
<button onclick="hideShow()">Hide/Show All</button>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code given below. On button click a function is executed which hides all the div elements and on second click all divs are displayed again.
For this we have used for loop to target each div one by one.
<script>
var allDiv = document.getElementsByTagName('div');
var display = 0;
function hideShow()
{
if(display == 1)
{
for(var i = 0; i < allDiv.length; i++){
allDiv[i].style.display = 'block';
}
display = 0;
}
else {
for(var i = 0; i < allDiv.length; i++){
allDiv[i].style.display = 'none';
}
display = 1;
}
}
</script>
Demo
Video Tutorial
Watch video tutorial on How To Hide and Show all Divs using JavaScript.