Auto close dynamic tab when other tab is opened - Dawn

[INFRA]

Hi,

I would like the product tabs to close when another one is opened. How can I best do this?

Website

password: waiheke

 

[namphan · Accepted solution]

Hi @INFRA,

Please go to Actions > Edit code > sections > main-product.liquid file and add code here:

Code:

<script>
  document.querySelector('product-info').querySelectorAll('[id^="Details-"]').forEach((details) => {
    details.querySelector('summary').addEventListener('click', (event) => {
      document.querySelector('product-info').querySelectorAll('[id^="Details-"]').forEach((detailsProduct) => {
        if (details !== detailsProduct) {
          detailsProduct.querySelector('summary').setAttribute('aria-expanded', 'false');
          detailsProduct.open = false;
        }
      })
    });
  });
</script>

[tim]

Do not edit your theme code -- this will make theme updates complex.

Create a "Custom liquid" block in your "Product information" section and paste this code:

<script>
  if ( typeof(closeOthers) !='function') {
    window.closeOthers = (event) => {
      let t = event.target.closest('.product details:not([open]');
      if (!t) return;
      let p = t.closest('.product');
      p.querySelectorAll('details[open]').forEach( e => {
        if (e == t ) return;
        e.removeAttribute('open');
        e.querySelector('summary')?.setAttribute('aria-expanded', 'false');
      });
    }

    document.addEventListener('click', closeOthers);
  }
</script>

[INFRA]

Thank you, this is much better for updates 🙂

[WebDeskSolution]

Hello @INFRA 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.

• Click on Online Store > Themes.

• Find the theme you want to edit and then click Actions > Edit code.

• Search theme.liquid
• Insert the provided Script code at the above of the closing of the body tag
  SS : https://prnt.sc/7yb1GB4SmVEa

<script>
      window.addEventListener("load", function () {
          document.querySelectorAll("details").forEach((details) => {
              details.addEventListener("click", function () {
                  if (this.open) {
                      document.querySelectorAll("details").forEach((other) => {
                          if (other !== this) {
                              other.removeAttribute("open");
                          }
                      });
                  }
              });
              details.addEventListener("toggle", function () {
                  if (this.open) {
                      document.querySelectorAll("details").forEach((other) => {
                          if (other !== this) {
                              other.removeAttribute("open");
                          }
                      });
                  }
              });
          });
      });
    </script>

Please hit Like and Mark it as a Solution if you find our reply helpful.