show div after x seconds or when click

Question

I've got two divs like:

<div id="h1" style="display: none;"></div>
<div id="h2" style="display: none;"></div>

and

<a onclick="showh1()">h1</a>
<a onclick="showh2()">h2</a>

and this javascript for choose one div to be shown

function showh1() {
                 document.getElementById('h1').style.display = "block";
                }
function showh2() {
                 document.getElementById('h2').style.display = "block";
                }

But I'd like to show div h1 after x seconds or when the users clicks to show one of two divs. How can I do this? Thank you!

You need to use a [`timing`](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers) function. — MinusFour, Oct 19 '15 at 15:42
Possible duplicate of [Is there some way to introduce a delay in javascript?](http://stackoverflow.com/questions/24849/is-there-some-way-to-introduce-a-delay-in-javascript) Have you even Googled “javascript delay”? — Sebastian Simon, Oct 19 '15 at 15:42

score 0 · Accepted Answer · answered Oct 19 '15 at 15:48

0

After X seconds:

function showh1() {
  document.getElementById("h1").style.visibility = "visible";
}
setTimeout("showh1()", x*1000); // after x secs

Call function on click:

<a onclick="showh1()">h1</a>

answered Oct 19 '15 at 15:48

Manikiran

2,618
1
23
39

Thank you it works nice! But, now how can I do to hide after 1 second when mouse is over a certain div? – Facu Subiabre Oct 19 '15 at 16:01
`setTimeout("showh1()", x*1000);` ► Not sure about using a function reference as a string never seen that before, why not use ► `setTimeout(showh1, x*1000);` or when/if more calls are needed wrap it `setTimeout(function(){showh1();}, x*1000);` – Nope Oct 19 '15 at 16:04
Its old school style of coding baby :P – Manikiran Oct 19 '15 at 16:09
@Manikiran: lol :) Fair enough :) I just never seen it before or could get jsFiddle to execute it. If it works it works :) – Nope Oct 19 '15 at 16:10
@FacuSubiabre Here's your required code: `document.getElementById("h1").onmouseover=setTimeout(function (){document.getElementById("h1").style.visibility = "hidden";}, 1000);` – Manikiran Oct 19 '15 at 16:19

score 0 · Answer 2 · answered Oct 19 '15 at 15:49

0

when the window loads, set both display to hide and then set a timeout with javascript to run the code to set the display to not hide.

answered Oct 19 '15 at 15:49

Johnathan Ralls

131
1
12

show div after x seconds or when click

2 Answers2