Showing a hidden part of the page after the javascript timer ends

Question

I want to be able to hide a part of the website with a timer and after that timer ends the users be able to see the hidden part
this is the script ive done so far

 // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);

 <p id="demo"></p>

Answer 1

Just show the div

You can remove a class or change the display or change.hidden

 // Set the date we're counting down to var countDownDate = new Date(); countDownDate.setTime(countDownDate.getTime() + 5000); // demo // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; document.getElementById("hidden1").classList.remove("hide"); document.getElementById("hidden2").style.display = "block"; document.getElementById("hidden3").hidden=false; } }, 1000);

 .hide { display: none; }

 <p id="demo"></p> <div id="hidden1" class="hide">Show this when expired (class)</div> <div id="hidden2" class="hide">Show this when expired (display)</div> <div id="hidden3" hidden>Show this when expired (hidden)</div>