How to display hidden div after page reload?

Question

Hello, everybody.

I am developing a page where there is a hidden button that appears after a certain time.

My code:

HTML:

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="diminuir-video" style="padding:30.25% 0 0 0;position:relative; 
max-width: 800px;">




<iframe src="LINK_DO_VIDEO" 
style="position:absolute;top:0;left:0;width:100%;height:100%;" autoplay 
width="840" height="550" frameborder="0" webkitallowfullscreen 
mozallowfullscreen allowfullscreen id="video"></iframe>
</div>

<div class="show--div-20sec">
    <p><a href="https://google.com" target="_blank" 
class="btn-01">TESTE</a>
   </p>
</div>


</div>
  <script 
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> 
 </script>



    <script  src="js/index.js"></script>

In JS I have the function for the div to be displayed after 18:40:

$(function() {
var iframe = $('#video')[0];
  console.log()
var player = $f(iframe);

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {    
    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause() {
}

function onFinish() {
}
var time;
if (localStorage.getItem('cache') === 'true') {
  time = 0;
} else {
  time = 1120;
  localStorage.setItem('cache', 'true');
}
function onPlayProgress(data) {
  if (data.seconds >= time) {
    $('.show--div-20sec').css('display', 'block')
  }
}
});

What I would need now is that when the user reloads the page, instead of waiting 18:40 to reappear the button, it displays immediately.

Thank you!

Answer 1

Use try to use this...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-div-20sec" style="display: none;">
<p><a href="https://google.com" target="_blank"
      class="btn-01">TESTE</a>
</p>
</div>
<script>
if (localStorage.getItem('cache3') === 'true') {
    $('.show-div-20sec').css('display','')
} else {
    setTimeout(function(){
        $('.show-div-20sec').css('display','')
    }, 20000);
    localStorage.setItem('cache3', 'true')
}
</script>