HTML global attribute hidden








The hidden attribute is a Boolean attribute that indicates if to show an element.

What's new in HTML5

The hidden attribute is new in HTML5.

Syntax

<element hidden>

Browser compatibility

hidden Yes 11.0 Yes Yes Yes

Example

The following code shows how to use hidden attribute.

<!DOCTYPE HTML>
<html>
<head>
<script>
var  toggleHidden = function()  {
    var  elem  = document.getElementById("toggle");
    if (elem.hasAttribute("hidden"))  {
       elem.removeAttribute("hidden");
    }  else  {<!--from  w ww.  ja v a 2 s.c om-->
       elem.setAttribute("hidden",  "hidden");
    }
}
</script>
</head>
<body>
    <button onclick="toggleHidden()">Toggle</button>
    <table>
        <tr><th>Name</th><th>Value</th></tr>
        <tr><td>HTML</td><td>mark up</td></tr>
        <tr  id="toggle"  hidden><td>CSS</td><td>Style</td></tr>
        <tr><td>Javascript</td><td>Logic</td></tr>
    </table>
</body>
</html>

Click to view the demo