Need help with an interaction I cannot fix

Hi! This is my first post, although I’ve used the forum a lot for my previous experiments.

I’m stuck in this one: In the english version of my site there’s an interaction I can’t fix.
In the second section, ‘What We Do’, there’s an animated div that overflows on top of each slide with information about each one: Air, Sea, Ground and Upgrade. When the section loads the first slide is Air and automatically calls the div with more info on that service.

What I’m trying to achieve is to remove that section from becoming visible on section load, but keep it when there’s a click on the Air button.

Consider there’s a small script that links buttons to slides, but the slides are linked to the overflowing divs by webflow animations. Find the code at the end of this post.


Here is my public share link: https://preview.webflow.com/preview/pandion?preview=707db6b702f207fae62ac15673e4577f

Here’s the small script:
$(document).ready(function() {
$(‘#gotoslide1’).click(function(e) {
e.preventDefault();
$(‘.hero-link’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.slide-nav div:nth-child(2)’).trigger(‘tap’);
});
$(‘#gotoslide2’).click(function(e) {
e.preventDefault();
$(‘.hero-link’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.slide-nav div:nth-child(3)’).trigger(‘tap’);
});
$(‘#gotoslide3’).click(function(e) {
e.preventDefault();
$(‘.hero-link’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.slide-nav div:nth-child(4)’).trigger(‘tap’);
});
$(‘#gotoslide4’).click(function(e) {
e.preventDefault();
$(‘.hero-link’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.slide-nav div:nth-child(5)’).trigger(‘tap’);
});
});

For real? No answers or questions? I’m still trying to fix this thing.