.hidden

The hidden property allows you to get the value of the HTML attribute hidden or change it. When hidden is true, the element is hidden on the page and not accessible to screen readers.

Accessing the hidden property will return the current value of the HTML attribute hidden. If the attribute is not present on the element, the result will be false:

        
          
          <input type="text" placeholder="Enter email"><div class="error" hidden>Incorrect email</div>
          <input type="text" placeholder="Enter email">
<div class="error" hidden>Incorrect email</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const input = document.querySelector('input')const div = document.querySelector('div')console.log(input.hidden)// falseconsole.log(div.hidden)// true
          const input = document.querySelector('input')
const div = document.querySelector('div')

console.log(input.hidden)
// false

console.log(div.hidden)
// true

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Assigning a value to hidden will change the value of the attribute. Depending on the value, the element will be hidden or shown. Let's hide the input field from the example above:

        
          
          input.hidden = true
          input.hidden = true

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the input field will have the hidden attribute, and the element will be hidden:

        
          
          <input type="email" placeholder="email@example.com" hidden>
          <input type="email" placeholder="email@example.com" hidden>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If you assign false, the attribute will be removed from the element, and the element will become visible again:

        
          
          input.hidden = false
          input.hidden = false

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The HTML attribute hidden has been around for a long time and works just like display: none. When the attribute is active, the element will not only be visually hidden but also will not take up space on the page. That is, the hidden element will behave as if it is not there at all.

Elements can be hidden via display in CSS or using the style property, but the hidden attribute is conveniently managed from JavaScript.