How to hide section then unhide after certain amount of time?

Technical
1

Hello,

New to Funnelish.

I have video sales page. Below the video is the calendar for people to book a call.

The calendar is inside the section below the video. I want the section to remain hidden for 9 minutes.

After 9 minutes I want the section to be viewable so they can then book an appointment through the calendar.

I can’t seem to find a native setting inside Funnelish that would allow me to hide a section for a specific amount of time.

Does anyone have any suggestion?

Do i need to do some special coding?

Thank You

2

I’m using the following javascript, i’ve given the section the id=‘delay’

<script>
$(document).ready(function() {
  $('#delay').hide().delay(420000).fadeIn(3000);

});

but still nothing

3

I’ve tried trimming it down:

(document).ready(function() {
(‘delay’).hide().delay(420000).fadeIn(3000);
});

4

Hi @Dannyp,
To show a section after a certain amount of time, you have to use some custom coding, for the time being :

1 - Adding the CSS code.

Go to Custom Codes > Custom CSS and paste the following code:

/* CSS */
.fadeIn {
    animation: fadeInAnimation ease 3s;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

2 - Adding the JS code.

Go to custom codes > Custom JS (Body) and paste the following:

 <script>
  let timeInMinutes = 0.1;
       let mySec = document.querySelector(".delay_sec");
        mySec.style.opacity = 0;
  setTimeout(hideSec, timeInMinutes*60*1000);
  
  function hideSec(){
      mySec.classList.add("fadeIn");
  }
  </script>

3 - Usage:

Now, you can select any element, go to advanced and give it the class ‘delay_sec’, and it will fade in, in about 0.1min.
PS: Change the value of timeInMinutes from 0.1 to 10 for a 10 minutes delay.
image

Let us know how it goes.

Best,
Fey @Funnelish.