<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>