#236 - Show or Hide Elements Based on a URL Parameter

<!-- 💙 MEMBERSCRIPT #236 v0.1 💙 SHOW / HIDE ELEMENTS BASED ON URL PARAMETER -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var els = document.querySelectorAll('[data-ms-code="url-toggle"]');
  if (!els.length) {
    console.warn("Memberscript #number
236: Add data-ms-code=\"url-toggle\" to the element(s) you want to show/hide.");
    return;
  }

  var params = new URLSearchParams(window.location.search);

  function attr(el, name, fallback) {
    return el.hasAttribute(name) ? el.getAttribute(name) : fallback;
  }
  function listOf(str) {
    return String(str || "").split(",").map(function(s) { return s.trim(); }).filter(Boolean);
  }
  function lower(s) {
    return String(s == null ? "" : s).trim().toLowerCase();
  }

  els.forEach(function(el) {
    var name = attr(el, "ms-code-param", "");
    if (!name) {
      console.warn("Memberscript #number
236: Add ms-code-param=\"<name>\" (the URL parameter to check).");
      return;
    }

    var action = lower(attr(el, "ms-code-action", "hide"));
    var wanted = listOf(attr(el, "ms-code-value", "")).map(lower);
    var showDisplay = attr(el, "ms-code-display", "block");
    var debug = attr(el, "ms-code-debug", "keyword
false") === "keyword
true";

    // matched = parameter is func
present(and, if a value is given, equals one of them).
    var matched;
    if (!params.has(name)) {
      matched = false;
    } else if (!wanted.length) {
      matched = true;
    } else {
      matched = wanted.indexOf(lower(params.get(name))) !== -1;
    }

    if (action === "show") {
      // Hidden by keyword
default, revealed only when matched.
      el.style.display = matched ? showDisplay : "none";
    } else {
      // Visible by keyword
default, hidden only when matched.
      if (matched) el.style.display = "none";
    }

    if (debug) {
      console.log("Memberscript #number
236:", { param: name, action: action, value: params.get(name), matched: matched });
    }
  });
});
</script>