Shopify themes, liquid, logos, and UX
Hello everyone, I need a little help. On my Shopify store, when I open a filter, such as the price filter, and then open another filter like the color filter, the price filter remains open. I want the filters to work so that when I open one, the previously opened filter closes automatically. Is there a code to achieve this?
Any help would be greatly appreciated!
My store URL: https://myperfectwear.com/
add this script:
document.addEventListener('DOMContentLoaded', function() {
const detailsElements = document.querySelectorAll('details.accordion');
detailsElements.forEach(detail => {
detail.addEventListener('click', function() {
detailsElements.forEach(d => {
d.removeAttribute('open');
d.setAttribute('aria-expanded', 'false');
}
});
if (detail.hasAttribute('open')) {
detail.setAttribute('aria-expanded', 'true');
} else {
detail.setAttribute('aria-expanded', 'false');
}
});
});
});
Hello @Kyle_liu thanks for replying , I added my comment I will highly appreciate your response
Thank you so much @Kyle_liu . Where I should add this script ? Can you please tell me . 🙂
Hello
Thank you so much @Kyle_liu . Where should I add this script? Can you please tell me .
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025