Hiding Elements w/ Javascript

Question

How do I hide h1 and h2 and other elements on my website?
Don't worry I'm not trying to do some weird Google stuff. My website it private and I need to hide the two headers and some elements in body and make them visible again after a countdown is over. I got the countdown stuff but I can't hide the other elements as h1...

Answer 1

you can use CSS animation that can go something like <div class=hide>I am coming</div><style>.hide { animation: hidden 3s linear;}
@keyframes{ 0% {opacity:0;} 100% {opacity: 1;}}</style>
are you doing this for an effect then do this however it will occupy the spaces even if hidden or you set display to none using js set to block. document.getElementById("nba").style.display = "none" ;
or you can use js too to write the innerHTML I don't know why it didn't woked. the code is right may be some error in adding the js. I got the error you might have used the reserved word as var change it.

Answer 2

I got it kinda...
It's not exactly what I wanted but it's working, too.
I just left the tags h1 and h2 empty and wrote something in them after the countdown ended:

HTML:
<header>
<h1 id="nb1" ></h1>
<h2 id="nb2"></h2>
</header>

JS:
var element = document.getElementById("nb1");
element.innerHTML = "first line";
var telement = document.getElementById("nb2");
telement.innerHTML = "second line";

Answer 3

Instead of change innertext, you can change "display" property:

var element = document.getElementById("nb1");
element.style.display = 'none';
element.style.display = 'block';

Answer 4

I tried that more than once and it didn't work out for me :/
I might did something wrong but I neither had time nor patience to do it that way ...
But yes I know ;)