flexible URL QueryString show hide div script

querystring-show-hide.js

document.addEventListener("DOMContentLoaded", () => {
  let state = {
    url: window.location.href,
  };

  let module = {
    showHideElements(allElements) {
      Array.from(allElements).map((element) => {
        let key = element.dataset.qKey;
        let identifier = element.dataset.q;
        if (!identifier) return;

        /*don't show/hide if there is no 
        truthy 'qKey' parameter set in the url */
        let query = this.getQueryParameterValue(key, state.url);
        if (!query) return;

        //don't hide the selected one
        if (query == identifier) return;

        //don't hide anything if there are no matches
        let matches = document.querySelector(`[data-q-key="${key}"][data-q="${query}"]`);
        if (!matches) return;

        //otherwise hide 'em
        element.style.display = "none";
      });
    },
    init() {
      let allElements = document.querySelectorAll(`[data-q-key]`);
      if (!allElements.length) return;

      this.showHideElements(allElements);
    },
    //utils
    getQueryParameterValue(field, url) {
      let href = url;
      let reg = new RegExp("[?&]" + field + "=([^&#]*)", "i");
      let string = reg.exec(href);

      return string ? string[1] : null;
    },
  };

  module.init();
});