How do i make a
tag dissapear after 20 seconds with JS?

Question

i am building a project for my company and I am wondering how do i make a div dissapear after 20 seconds? Because I am building a site with a div with position: -webkit-sticky; and

<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
</style>
<div class="sticky">
<div class="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>

I would just like to know how can I set a timeout for that warning with JavaScript?

Thanks, Ring Games

Does this answer your question? [CSS Auto hide elements after 5 seconds](https://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds) — Jamith NImantha, Apr 28 '20 at 01:42

score 1 · Accepted Answer · answered Apr 28 '20 at 00:28

1

you can use a setTimeout to hide the element after 20 seconds.

const areaWarning =  document.getElementById("areaWarning")

setTimeout(hideElement, 20000)

function hideElement() {
  areaWarning.style.display = "none"
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.areaWarning {
  width: 100%;
  height: 102px;
  background: lightgreen;
  display: inline-block;
}

<div class="sticky">
  <div id="areaWarning">
    <h1> This site is currently still being built </h1>
    <p> We are still working on this site, sorry</p>
  </div>
</div>

answered Apr 28 '20 at 00:28

Oscar Velandia

1,051
1
4
9

Hello, well, it doesn't seem to work with classes. Like CSS. – RingGamesCompany Aug 24 '20 at 23:47
if you need to add a class, for example "hide", you can do something like, areaWarning.classList.add("hide") – Oscar Velandia Aug 26 '20 at 01:00

score 0 · Answer 2 · answered Apr 28 '20 at 00:31

In vanilla JS without ES6, something like:

<script>   
    window.addEventListener('load', function() {
        var warning = document.querySelector(".sticky");
        setTimeout(function() {
            warning.style.visibility = "hidden";
      }, 20000);
    })
</script>

How do i make a tag dissapear after 20 seconds with JS?

2 Answers2

How do i make a
tag dissapear after 20 seconds with JS?