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 .
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025