Every HTML element on a webpage has a default value for the display property, which determines how the element will be displayed on the web page.
The default value for the display property depends on the type of the element. Based on the type of the element, it can be block, inline, or inline-block.
But what if the element is hidden?
Well, if an element is hidden, then its display property is typically set to none.
So, if you want to hide an element from a page, you can simply set its display property to none. This can be done with JavaScript, as well as with CSS.
When you set an element’s display property to none, it is effectively hidden from the view and no longer occupies any space on the page.
For example, let’s say we have a div element in our HTML file and we want to hide it from the document as soon as we click the button.
<button id="myBtn">Hide the div</button> <div id="myDiv">Click on the button to hide the div.</div> <p>This is some random text.</p>
Adding some CSS:
div{
padding: 10px;
margin-top: 20px;
background: springgreen;
}
Now, we want to hide the div element as soon as the button is clicked.
For that, we have to add an event listener to the button which will fire a callback function every time the button is clicked.
Inside the callback function, we need to set the display property of the target element(div here) to none so that the element becomes hidden instantly.
// Get references to the elements
const btn = document.getElementById('myBtn');
const target = document.getElementById('myDiv');
// Fires on button click
btn.addEventListener('click', function(){
// Hide the target element(div)
target.style.display = 'none';
});
Output:
Toggle Hide and Show with the display Property
If an element is already hidden with the style.display="none" and you want to display it back on the page, you have to set the display property back to its default value.
To restore the default display value of an element, you can either set its display property to an empty string ''.
OR, you can manually set the display property to block, inline or inline-block based on the type of the element.
For example, if the element is of type block such as a div, list, paragraph, etc., set the style.display to block and if the element is of type inline such as a span, link, img, etc., set the style.display property to inline.
Let’s take the same example again and try to show and hide the div on button click:
<button id="myBtn">Hide/Show</button> <div id="myDiv">Click on the button to toggle the div.</div> <p>This is some random text.</p>
Add some CSS:
div{
padding: 20px;
margin-top: 20px;
background: springgreen;
}
Add the JavaScript:
// Get references to the elements
const btn = document.getElementById('myBtn');
const target = document.getElementById('myDiv');
// Fires on button click
btn.addEventListener('click', function(){
// Check if element is hidden
if(target.style.display == 'none'){
target.style.display = ''; // Show
}
else{
target.style.display = 'none'; // Hide
}
});
Output:
Method 2: Show and Hide Element with the Visibility Property
The visibility property specifies whether an element is visible or hidden.
It can have two possible values:
visible– Specifies that the element is visiblehidden– Specifies that the element is hidden
Just like the display property, you can also use the visibility property to show or hide an element.
However, when you hide an element by setting its visibility property to hidden, the element is hidden from the view, but it still takes up the same space in the document layout.
This means that other elements on the page will not move to fill the space vacated by the hidden element.
Because of this difference, the visibility property is generally used when you want to hide an element without affecting the layout of the page, while the display property is used when you want to completely remove an element from the layout.
Let’s take an example and try to toggle the visibility of a div element, as we did in the previous example:
<button id="myBtn">Hide/Show</button> <div id="myDiv">Click on the button to toggle the div.</div> <p>This is some random text.</p>
Add some CSS:
div{
padding: 20px;
margin-top: 20px;
background: springgreen;
}
Add the JavaScript:
// Get references to the elements
const btn = document.getElementById('myBtn');
const target = document.getElementById('myDiv');
// Fires on button click
btn.addEventListener('click', function(){
// Check if element is hidden
if(target.style.visibility == 'hidden'){
target.style.visibility = 'visible'; // Show
}
else{
target.style.visibility = 'hidden'; // Hide
}
});
Output:
Method 3: Show and Hide Element by Toggling a Class
In all the examples that we have discussed so far, we directly used the style attribute to manipulate the display or the visibility property.
But that’s not a good practice. We should instead add or remove a class that contains the appropriate styles.
For example, if we want to show or hide the element with the display property, we can create a CSS class that contains display: none; and then use the logic to add or remove this CSS class from the element.
To add and remove a CSS class from an element, you can use the classList.add() and classList.remove() methods.
And if you want to check if a class exists on an element or not, you can use the classList.contains() method.
The classList.contains() method takes a single parameter which is the class name you want to check.
If the given class exists on the element, the classList.contains() method returns true, otherwise, it returns false.
Let’s try to implement the same example again where we will show and hide the div on button click:
<button id="myBtn">Hide/Show</button> <div id="myDiv">Click on the button to toggle the div.</div> <p>This is some random text.</p>
Define a CSS class .hide, which has a CSS rule display: none;
div{
padding: 20px;
margin-top: 20px;
background: springgreen;
}
.hide{
display: none;
}
Add the JavaScript:
// Get references to the elements
const btn = document.getElementById('myBtn');
const target = document.getElementById('myDiv');
// Fires on button click
btn.addEventListener('click', function(){
// Check if the class 'hide' exists on target
if(target.classList.contains('hide')){
// Remove the class 'hide'
target.classList.remove('hide');
}
else{
// Add the class 'hide'
target.classList.add('hide');
}
});
Output:
Conclusion
In this article, We learned how we can show and hide an element dynamically with JavaScript.
In summary, if you want to show and hide an element with JavaScript, you can manipulate the display property.
If you set the display property of the element to none, the element will be hidden from the layout and will not occupy any space.
And, if you want to display it back, you can set the style.display property to an empty string('').
If you want to hide the element from the layout and still want it to take the same space, you can set the visibility property to hidden.
You can use either of the two methods based on your requirement.
Thanks for reading.
