Hide or show HTML elements using visibility property in JavaScript Last Updated : 20 Dec, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report The visibility property is used to hide or show the content of HTML elements. The visibility property specifies that the element is currently visible on the page. The 'hidden' value can be used to hide the element. This hides the element but does not remove the space taken by the element, unlike the display property. Syntax:element.style.visibility = 'hidden';element.style.visibility = 'visible';Example: This example shows the visibility shown and hidden for a div. html <!DOCTYPE html> <html> <head> <style> .container { height: 80px; width: 250px; border: 2px solid black; background-color: green; color: white; } </style> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> </div> <p> Click the buttons to show or hide the green box </p> <button onclick="showElement()"> Show Element </button> <button onclick="hideElement()"> Hide Element </button> <script type="text/javascript"> function showElement() { element = document.querySelector('.container'); element.style.visibility = 'visible'; } function hideElement() { element = document.querySelector('.container'); element.style.visibility = 'hidden'; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Hide or show HTML elements using visibility property in JavaScript S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Properties Similar Reads How to Toggle Password Visibility using HTML and JavaScript ? In this article, we will learn about how to toggle password visibility using HTML and JavaScript. Passwords are those input types that take hidden inputs. It can be shown and hidden from the user by toggling its type between text and password. Approach The following approach will be implemented to t 2 min read Hide elements in HTML using display property Hiding elements in HTML is a common technique used to control the visibility of content on a webpage. This approach allows developers to dynamically show or conceal elements based on user interactions, the display property involves setting display: none in CSS. This completely removes the element fr 2 min read How to set visibility property of an element in CSS ? Visible property is used to specify whether an element is visible or not in a web document, but the hidden elements take up space in the web document. You can set the visibility property of an element in CSS using the same Visible property. Through visibility property, we can make elements like imag 2 min read How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this 3 min read How to Hide an HTML Element in Mobile View using jQuery ? Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery. Approach: Initially, we are required to detect whether our system is 'Mobile' or not, for that window.navigator.userAgent property is used. It returns a string containing informatio 2 min read Like