hidden - HTML CSS HTML Global Attribute

HTML CSS examples for HTML Global Attribute:hidden

  1. HOME
  2. HTML CSS
  3. HTML Global Attribute
  4. hidden

Introduction

The hidden attribute is a Boolean attribute that indicates an element is not presently relevant.

Browsers hides the element if it is marked the hidden attribute.

The following code shows the effect of the hidden attribute.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>      
        <title>Example</title>  
        <script>  
            var toggleHidden = function() {  
                var elem = document.getElementById("toggle");  
                if (elem.hasAttribute("hidden")) {  
                    elem.removeAttribute("hidden");  
                } else {  <!--   w ww  .java2s  . c  o  m-->
                    elem.setAttribute("hidden", "hidden");  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <button onclick="toggleHidden()">Toggle</button>  
        <table>  
            <tr><th>Name</th><th>City</th></tr>  
            <tr><td>Tom</td><td>London</td></tr>  
            <tr id="toggle" hidden><td>Joe</td><td>New York</td></tr>  
            <tr><td>Edith</td><td>Paris</td></tr>  
            <tr><td>Jack</td><td>L.A</td></tr>  
        </table>  
    </body>  
</html>

Related Tutorials