How to make collabsable row close by deafult when clicking on the next row?

[sidenkompaniet]

How to make collabsable row close by deafult when clicking on the next row?

[sherpabot]

are you using a specific theme, or building the accordion group from scratch? 

[namphan]

Hi @sidenkompaniet,

Are you referring to the product page accordion? Please explain more about it, I will help you check it

[sidenkompaniet]

https://4d61f0-d9.myshopify.com/products/sidenklanning-zigzag-svart

Yes on the product page! Thank you very much! I want it to close when you click on the next one😊

[namphan · Accepted solution]

Hi @sidenkompaniet,

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

Code:

<script>
  const productContent = document.querySelector('#MainProduct-{{ section.id }}');
  const listAccordion = productContent.querySelectorAll('.product__accordion details');
  listAccordion.forEach((accordion) => {
    accordion.addEventListener('click', (event) => {
      if (event.currentTarget.hasAttribute('open') === false ) {
        listAccordion.forEach((otherAccordion) => {
          if (otherAccordion !== event.currentTarget) {
            const summaryElement = otherAccordion.querySelector('summary');
            otherAccordion.removeAttribute('open');
            summaryElement.setAttribute('aria-expanded', false);
          }
        })
      }
    });
  })
</script>

[sidenkompaniet]

Thank you so much! So helpful!

[namphan]

Hi @sidenkompaniet,

You're welcome and nice to meet you

[Dan-From-Ryviu]

Hi @sidenkompaniet 

You can do that by adding this code to theme.liquid file, before </body> in Online Store > Themes > Edit code 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const accordions = document.querySelectorAll('.product__accordion details');
    accordions.forEach(accordion => {
      accordion.addEventListener('toggle', function() {
        if (this.open) {
          // Close all other accordions
          accordions.forEach(otherAccordion => {
            if (otherAccordion !== this) {
              otherAccordion.removeAttribute('open');
            }
          });
        }
      });
    });
  });
</script>