Making advertizement disappear when the menu button is clicked

[joon1]

(1) when it is loading, a “menu button” yellow backgrounded and an “advertizement” pink backgrounded in the center are shown.
(2) if I click the button “menu”, a menu box silver backgrounded is shown.
(3) if I click the button “menu” again, the menu box will be disappear.

The page at http://dot.kr/Q/layout/04/ works like the above.
I like to make the page like the following.

(1) when it is loading, “menu button” and “advertizement” are shown.
(2) if I click the menu button, the menu box is shown and the advertizment is disappeared at the same time.
(3) if I click the button “menu” again, the menu box will be disappear.
(4) if I click the button “menu” again, the menu box is shown and the advertizement is not shown.

The advertizement is shown when the page is loading. and it disappears forever by clicking the button menu for the 1st time.
The advertizement is shown only if the page is loading.

[PaulOB]

This is really a question for the JS forum but I think this is what you want.

(function (d) {
  "use strict";

  const content = d.querySelectorAll(".menu");
  const advert = d.querySelector("#ad");
  var ad = true;

  content.forEach((item) => {
    item.classList.add("hide");
  });

  const buttons = d.querySelectorAll(".button");
  var toggleClass = "show";

  buttons.forEach((item) => {
    item.addEventListener("click", (event) => {
      if (item.classList.contains("active")) {
        toggleClass = "hide";
      } else {
        toggleClass = "show";
      }
      hideAll();
      toggleDiv(item, item.dataset.destination);
    });
  });

  function hideAll() {
    content.forEach((item) => {
      item.classList.add("hide");
      item.classList.remove("show");
    });

    buttons.forEach((item) => {
      item.classList.remove("active");
    });

    if (ad === true) {
      advert.classList.add("hide");
      ad = false;
    }
  }

  function toggleDiv(targetButton, targetDiv) {
    if (toggleClass === "show") {
      targetButton.classList.add("active");
    }
    d.querySelector("#" + targetDiv).classList.add(toggleClass);
  }
})(document);

document.getElementById("leftX").addEventListener("click", function () {
  var sox1 = document.getElementById("left").classList.add("hide");
  var xos = document.getElementById("bottomWrap").classList.add("hide");
});

document.getElementById("rightX").addEventListener("click", function () {
  var sox1 = document.getElementById("right").classList.add("hide");
  var xos = document.getElementById("buttonWrap").classList.add("hide");
});

Note in your CSS you keep using sox-sizing instead of box-sizing. There is no way to size sox in CSS

[joon1]

@PaulOB

There is no way to size sox in CSS

I am afraid it is contaminated.
I fixed it and your code works fine at http://dot.kr/Q/layout/08/
Thank you very much…