<!-- 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>