Making advertizement disappear when the menu button is clicked

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

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.

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 :slight_smile:

2 Likes

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…

1 Like