Local Storage toggle banner - appearing quickly when refreshing

Hi,

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

https://jsfiddle.net/toolman/nLzx9gy5/2/

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

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");
2 Likes

Thank you, that worked perfectly :smiley: