In this section, we will learn what the hidden attribute is and how to use it in HTML.
HTML hide element with hidden attribute
The hidden attribute as the name suggests, is used to hide an element in an HTML document.
Basically, browsers won’t render an element that has this attribute in its opening tag.
We use this attribute when want to keep users from seeing an element until they do some actions in an HTML document.
The hidden attribute is accessible in programming languages like JavaScript and with the help of this language we can un-hide a hidden element. So basically, we can program in an HTML document to wait for a specific action from users and then visible the already hidden element in a document (or vice-versa).
Note: for both hide and un-hide an HTML element, we can use JavaScript.
HTML hidden Attribute Syntax
<element hidden>HTML hidden Attribute Values
The hidden attribute is a boolean attribute. That means we only need to put this element in the opening tag of an element. After that, the element becomes hidden in the document.
Example: hide a div in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: lightblue;
box-shadow: 5px 5px 20px lightgray;
}
</style>
</head>
<body >
<button id = "un-hide">Click Here to Hide the dive element below</button>
<div>
This is a div element...
</div>
<script type="text/javascript">
document.getElementById("un-hide").addEventListener("click",(event)=>{
document.getElementsByTagName("div")[0].hidden = true;
});
</script>
</body>
</html>In this example, there’s a div element in the document. We then used JavaScript to access the <div> element and set its hidden attribute to true after a user clicked the button in the page.
Example: HTML button hidden
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
</head>
<body >
<p id="un-hide">There's a button here, click to see it</p>
<button hidden>Hello there 🙂 </button>
<script type="text/javascript">
document.getElementById("un-hide").addEventListener("click",(event)=>{
document.getElementsByTagName("button")[0].hidden = false;
});
</script>
</body>
</html>In this example, there’s a hidden element in the HTML document. We then used JavaScript to access the button and un-hide it after a user clicked the paragraph.