Local Storage toggle banner - appearing quickly when refreshing

[toolman]

Hi,

I have the following jQuery toggle which hides/shows a banner and remembers it’s state using local storage.

Edit fiddle - JSFiddle - Code Playground

However, if I close the banner so it’s in it’s closed state and refresh the page, the banner appears for a split second and then hides again.

Is there a way to stop this from happening?

Thanks

[Paul_Wilkins]

I’d use some CSS to initially hide it, which prevents it from showing at the start:

.covid-19-banner {
    display: none;
}

then update the JavaScript to use toggle, which lets us tell it that it shows when pb isn’t true.

    // if (pb == "true") {
    //   jQuery(".covid-19-banner").hide();
    // }
    jQuery(".covid-19-banner").toggle(pb !== "true");

[toolman]

@Paul_Wilkins

// if (pb == “true”) { // jQuery(“.covid-19-banner”).hide(); // } jQuery(“.covid-19-banner”).toggle(pb !== “true”);

Thank you, that worked perfectly