Menu
How can i hide html elements by using javascript if i have this html page
<body>
<h1>test</h1>
<div id="1" align="center" style="padding-top: 10%;" >
<h1 style="color: #FFFFFF">fawazapp</h1>
<p style="color: #C0C0C0;"> bbb</p>
<p style="color: #FFFFFF;">aaaaaaaaa</p>
</div>
<div id="2" align="center" style="padding-top: 10%;" >
<h1 style="color: #FFFFFF">fawazapp</h1>
<p style="color: #C0C0C0;"> bbb</p>
<p style="color: #FFFFFF;">aaaaaaaaa</p>
</div>
</body>
i want to hide all elements except div with id number 2 to be page like this
<div id="2" align="center" style="padding-top: 10%;" >
<h1 style="color: #FFFFFF">fawazapp</h1>
<p style="color: #C0C0C0;"> bbb</p>
<p style="color: #FFFFFF;">aaaaaaaaa</p>
</div>
691
In JavaScript, style. visibility property is also used to hide the HTML element. It can have values like 'visible,' 'collapse,' 'hidden', 'initial' etc., but the value used to hide an element is 'hidden'.
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
To create hidden comments in HTML, add <! --- tag and end it with -- >. Whatever comes inside it is hidden.
In addition to DevlshOne's answer, you could also use css to make it not display:
var divOne = document.getElementById('1');
divOne.style.display='none';
There's a difference between the two. With visibility hidden, the space will still be consumed by the div, but you can't see it. With display='none', its as if its not there.
Pick the better one for you.
84
you will need to use something like this:
document.getElementById("1").style.display = "none";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
