With JavaScript, you can do many things with HTML elements. In this article, I will show you how to show/hide a div element by id using javascript.
Show/hide a div element by id using javascript
JavaScript provides two ways to show or hide a div element by its id. The first one is the display property, and the second one is the visibility property. I will show you both ways. Let’s see what’s the difference between these methods.
Before we start, to avoid confusion, check out my CSS file:
#example{
width: 500px;
height: 500px;
background-image: url('./61ca497efc91881256158064_blog\ article.png');
background-size: cover;
margin-left: auto;
margin-right: auto;
}
#mybtn1 {
margin-top: 30px;
}
#mybtn2 {
margin-top: 30px;
}Method 1 – Use the style display property
Syntax:
object.style.display // get the value of display property
object.style.display = value // Set value for display propertyThere are many values for the display property. However, this article will only cover ‘none’ and ‘block’ values.
display = ‘block’ // The element will be rendered as a block
display = ‘none’ // The element will not be displayed
See the following example for better visualization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div id="example">
</div>
<button id="mybtn1" class="btn btn-primary">Hide div element</button>
<button id="mybtn2" class="btn btn-primary">Show div element</button>
<script>
const myImage = document.getElementById('example');
const myButton1= document.getElementById('mybtn1');
const myButton2 = document.getElementById('mybtn2');
myButton1.addEventListener('click', function toggleButton1() {
if (myImage .style.display !== 'none') {
myImage .style.display = 'none';
}
});
myButton2 .addEventListener('click', function toggleButton2() {
if (myImage .style.display === 'none') {
myImage .style.display = 'block';
}
});
</script>
</body>
</html>Output:
I use two buttons, ‘Hide div element’ and ‘Show div element’, to hide and show the div element with an id equal to ‘example’.
Every time button ‘Hide div element’ is clicked, function toggleButton1() will be called and set the display property of the div element to ‘none’ if its value is different from ‘none’.
On the other hand, ‘Show div element’ is used to display the div element. The toggleButton2() function checks the value of the display property. If it equals none, set it to block.
Method 2 – Use the style visibility property
Syntax:
object.style.visibility// get the value of visibility property
object.style.visibility= value // Set value for visibility propertyJust like the case of the display property, we are only interested in two values of the visibility property, hidden and visible.
visibility = ‘hidden’ // The element will disappear but still takes up place
visibility = ‘visible’ // Display the element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div id="example">
</div>
<button id="mybtn1" class="btn btn-primary">Hide div element</button>
<button id="mybtn2" class="btn btn-primary">Show div element</button>
<script>
const myImage = document.getElementById('example');
const myButton1= document.getElementById('mybtn1');
const myButton2= document.getElementById('mybtn2');
myButton1.addEventListener('click', function toggleButton1() {
if (myImage .style.visibility !== 'hidden') {
myImage .style.visibility = 'hidden';
}
});
myButton2.addEventListener('click', function toggleButton2() {
if (myImage .style.visibility === 'hidden') {
myImage .style.visibility = 'visible';
}
});
</script>
</body>
</html>Output:
In fact, this program works quite similarly to the example above.
The only difference here is when using visibility, if the visibility = ‘hidden’, the div element will not disappear completely. It still takes up space but invisible to the user.
Summary
So you finally know how to show/hide a div element by id using javascript. Thanks for your interest in this article.
Maybe you are interested:
- Update all dom elements with a specific class using js
- Show/Hide an element on Radio button Selection using JS
- Hide an Element by Class using JavaScript
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js
