Last Updated : Jul 1, 2023
Here, below we are going to show you codes in which we show you how to hide elements with help of id.
Mainly, there are two ways with the help of which you can hide elements. We come in touch with these methods in our codes.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>home page</title> </head> <body> <h1 id="one"> heading one </h1> <h1 id="two"> heading two </h1> <h1 id="three"> heading three </h1> <h1 id="four"> heading four </h1> <h1 id="five"> heading five </h1> <h1 id="six"> heading six </h1> <script> var hidden = document.getElementById('five'); hidden.style.display = 'none'; var invisible = document.getElementById('two'); invisible.style.visibility='hidden'; </script> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, you can see that here we create some headings. All the under heading one but text written in them is different. And id’s given to them are also different. Here, we create six headings as you see.
- Inside script tag, we show two ways to hide elements. In both of them first we get there values inside variable. You can see the code that how we get them.
- Now, in our first method we use display none property and in other we use visibility hidden. Display none properly hides the element whereas visibility hidden does the same task but it left space after hide element. So, it upto you that which element you would use.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.