Throughout web development, users need to hide or show some elements. These elements can be a button, some animation, or a navigation bar etc. Most of the time the user wants a button or a navigation bar to be visible for the desktop viewpoint but not for the mobile viewpoint.
With JavaScript, users can easily hide or show an element on the webpage, depending on the behavior of the user. In this article we’ll see how JavaScript is used for this purpose.
Hiding and Displaying elements in JavaScript
Using JavaScript, we can hide or show an element on the webpage using:
- style.display
- style.visibility
Let’s understand each of them separately with examples and then compare how the differ from each other:
How to use style.display in JavaScript: The display property represents an element that should be displayed on your web page.. Using this user can hide the entire element, and the page is built as the previous element wasn’t there at all.
Syntax:
Here in commas, a value should be defined for whether to display the content or not. Here’s an example:
To Hide element: style.display = “none”:
<html>
<body>
<p>Click the "Hide Me" button to hide the DIV element:</p>
<div id = "div" >
<img src="img1.jpg" alt="" width="300 px" height="300 px">
This is an apple
</div>
<button onclick="myFunction()">Hide Me</button>
<script>
function myFunction() {
document.getElementById("div").style.display = "none";
}
</script>
</body>
</html>
As the user clicks on the button, the function is called to hide the element. This is done by assigning none value to style.display.
Now look at the output, how the button occupied the space of the image. This is how display works, it hides the element entirely and rebuilds the page as if the element wasn’t there in the first place.
To Show an element: style.display = “” or “block”:
<html>
<body>
<p>Click the "Show me" button to show element the DIV element:</p>
<div id = "div" >
<img src="img2.jpg" id ="div2" alt="" width="300 px" height="300 px" style="display:none">
</div>
<button onclick="myFunction()">Show Me</button>
<script>
function myFunction() {
document.getElementById("div2").style.display = '';
}
</script>
</body>
</html>
Now similarly, in order to show the element the button moved and provided space to the element when display was changed from style.display =”none” to style.display = “”.
Through these ways, the element will be displayed or completely hidden and not just its visibility. The page will be rebuilt according to these behaviours.
How to use style.visibility in JavaScript : The style visibility works in the similar way, but the difference is that only the visibility of the element is hidden from the screen reader. This means that the element is not removed from the page flow, hence leaving space for it on the page.
Syntax:
Here in commas, a value of “hidden” or “” no value should be defined for whether to display the content or not. To better understand this here’s an example:
<html>
<body>
<p id="div">This is a paragraph.</p>
<button type="button" onclick="myFunction()">Hide content of paragraph</button>
<p id="div2">This is another paragraph.</p>
<script>
function myFunction() {
document.getElementById("div").style.visibility = "hidden";
}
</script>
</body>
</html>
Now, here when the button was clicked ato hide the visibility, it only hid it for the viewer’s eye.
In this, the space on the web page was not occupied by the element. This shows how style.display and style.visibility differ.
Conclusion
Everyone wants to hide or show some particular elements on their web page. In this how to guide, we learned ways to change the visibility of elements on the web page using JavaScript. There are two specific ways, but they differ from each other slightly. Using style.display the content gets hidden and its space is occupied by the other content. Whereas, using style.visibility, the content only is hidden for the reader, but it’s still there as its space can not be occupied by other elements. This is extremely useful for web developers, as developers want some content to be hidden and some to be displayed according to the viewpoint.
