Show Countdown after button click

Question

i have code html

<div id="container">
    <a href="#container">Show Content</a>
    <div id="content">I am some content!</div>
</div>

How to when i click Show Content echo countdown (12s) before show <div id="content">I am some content!</div>

Give me a example for work. Thanks

Answer 1

Edit: Example updated to show elements when the countdown starts and hide them when the countdown ends. When the user clicks on the link, the countToShow function is invoked. Immediately the initialy hidden 'ads' element is shown with the command adsElement.style.display = '' (which removes the display: none style specified inline). When the countdown ends (remainingSeconds === 0), I hide the 'ads' element again setting adsElement.style.display = 'none'.

Here is an example using the setInterval function with possibility to specify the countdown time.

function countToShow(timeInSeconds) {

  var countdownElement = document.getElementById('countdown');
  var contentElement = document.getElementById('content');
  var adsElement = document.getElementById('ads');
  var remainingSeconds = timeInSeconds;

  adsElement.style.display = '';
  countdownElement.innerHTML = remainingSeconds;

  var interval = setInterval(function() {

    countdownElement.innerHTML = --remainingSeconds;

    if (remainingSeconds === 0) {
      clearInterval(interval);
      contentElement.style.display = '';
      adsElement.style.display = 'none';
    }

  }, 1000);
}

<div id="container">
  <a href="#container" onclick="countToShow(12)">Show Content</a>
  <div id="ads" style="display: none">
    <div id="countdown"></div>
    <div>Ads</div>
  </div>
  <div id="content" style="display: none">I am some content!</div>
</div>