Hidden block appears for a second on page refresh?

Question

JavaScript

There is a block that is collapsed and a cookie hangs on it. When the page is refreshed, it expands for a second and collapses back. How to remove it?

function closed() {
    let html = document.querySelector('body');
    window.addEventListener('unload', () => {
      setCookie('closed', html.classList.contains('closed') ? 1 : 0);
    });
    if (getCookie('closed') == 1) {
      html.classList.add("closed");
    }
    document.querySelector('.block').addEventListener('click', function() {
      html.classList.toggle("closed");
    });
  }

Answer 1

When the page is refreshed, it expands for a second and collapses back. How to remove it?

Well, since your element does not have the closed class until the function is executed, it is logical that it is loaded open.

How to remove it?

1) add the closed element in the code, and remove it when the function is called, if the cookie contains the required flag. There will also be a delay, but already at the opening, which is not so scary.
2) On the server side, check the cookie, and add the required class to the markup on the server.