Repeater content not hidden on load (sometimes)

I have a project page where if you hover over a repeater item, a solid rectangle and some text shows up. When the mouse leaves the container, the rectangle and text disappears. How this works it that I have the rectangle and text hidden on load, and appear when it’s moused over. Here’s the code for it:

export function container1_mouseIn_1(event, $w) {
    $w('#box1').show();  
    $w('#text11').show();  
}

export function container1_mouseOut_1(event, $w) {
    $w('#box1').hide();
    $w('#text11').hide();
}

The problem I have is that sometimes the box and text don’t hide on load and all the containers have their text and box showing. Is there a way to fix or prevent this?

Thanks in advance.

Did you tick the hidden on load checkbox in Properties Panel?

Yes, thats been ticked. Because of that
I feel like it just skips that line of code by accident or something when it loads. Could that be the case?

@mistyfey Well it depends on where your container is rendered and where the mouse is when the page loads. This will help though:

$w.onReady(function() {
    $w('#box1').hide();
    $w('#text11').hide();
);

Hi I have a repeater (#repeater1) kept on hidden on load.
I want the repeater to show only when my filter input box (#iTitle) is typed into

Can you please help with the coding for the same?

PS: I dont know Javascript