AngularJS Controllers

Hide or show HTML elements using visibility property in JavaScript

Last Updated : 20 Dec, 2023

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:

AngularJS Controllers

sayantanm19

Improve

Article Tags :

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

How to select all visible or hidden elements in a HTML page using jQuery ?

In order to select all visible or hidden elements in a page using jQuery, we can use the following jQuery selectors: :visible Selector The visible Selector is used to select all the elements that are currently visible in the document. Syntax: $(":visible") :hidden Selector The hidden selector select

How to remove an HTML element using JavaScript ?

Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions

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

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

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 Content Using getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn th

Show And Hide Password Using JavaScript

When creating login or registration forms, a common feature is the ability to show and hide passwords. This improves user experience by allowing users to verify their input before submitting the form. What We're Going to CreateWe will create a "Password Hide and Show" feature that will allow users t

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

Hide the Email Id in a form using HTML and JavaScript

Hiding an email ID in a form using HTML and JavaScript involves obfuscating or masking the email address to enhance privacy or security. This can be achieved by partially hiding the email characters or storing the email in hidden fields until needed for processing. Examples:Input :robin_singh@gmail.

How to Show or Hide Element in React ?

We can show or hide element in React dynamically by accessing the visibility of the elements with the help of state. We can toggle and update the state and render the variable as required. ApproachTo Show or Hide Element in React we will be using the state variable as a boolean value. We will condit