![js showhide js showhide](https://i.ytimg.com/vi/tJXbL_EcsZI/maxresdefault.jpg)
Using style.display the content gets hidden and its space is occupied by the other content. There are two specific ways, but they differ from each other slightly.
#JS SHOWHIDE HOW TO#
In this how to guide, we learned ways to change the visibility of elements on the web page using JavaScript.
![js showhide js showhide](http://www.tutorialspanel.com/wp-content/uploads/2019/09/showhide_javascript2.png)
ConclusionĮveryone wants to hide or show some particular elements on their web page. This shows how style.display and style.visibility differ.
![js showhide js showhide](https://i.ytimg.com/vi/tFSsKSQB-CI/maxresdefault.jpg)
In this, the space on the web page was not occupied by the element. Now, here when the button was clicked ato hide the visibility, it only hid it for the viewer’s eye. Syntax:ĭocument.getElementById("div").style.visibility = "hidden" This means that the element is not removed from the page flow, hence leaving space for it on the page. 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. The page will be rebuilt according to these behaviours. Through these ways, the element will be displayed or completely hidden and not just its visibility. 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 = “”. Click the "Show me" button to show element the DIV element:ĭocument.getElementById ( "div2" ).