Just a heads up, I'm not really experienced in development. More on the newbie side of things, but eager to learn. I've been looking for an answer to my question, but so far haven't come across anything that fits my specific situation.
It might sound simple, but I'm trying to set up a page with three hidden elements that appear either after a delay or when clicked. My challenge is getting all three elements to work smoothly together on the same page.
Here's what I need:
Element 1: A hidden image that shows up 10 seconds after the page loads
Element 2: Another hidden div that appears 10 minutes after the page loads
Element 3: An image inside element 2, which reveals yet another hidden div when clicked
I've used the setTimeout function below to reveal element 1, but I'm having trouble adding a second setTimeout command to make it work with another element.
<script language="javascript" type="text/javascript">
var pop=10;
function showIt() {
document.getElementById("hid").style.display = "block";
}
setTimeout(showIt, 10000);
</script>
I attempted repeating this code for the second element by changing the Element ID to "hid2", but it doesn't seem to execute. Do I need to include a cleartimeout function to stop the first setTimeout?
Additionally, I'll need some code for element 3 to activate upon a mouse click after element 2 is revealed.
Combining all three pieces of JavaScript to work harmoniously seems to be a bit tricky for me. Any guidance you could offer would be highly appreciated!