Shopify filters Auto-Close Previous Filters

Store Design
, , , ,

Topic summary

A Shopify store owner wants filters to auto-close when opening a new one, rather than having multiple filters remain open simultaneously.

Current Issue:

  • When opening a filter (e.g., color), previously opened filters (e.g., price) stay open
  • Desired behavior: only one filter section open at a time

Solution Provided:
A JavaScript code snippet was shared that:

  • Targets details.accordion elements
  • Automatically closes previously opened filters when a new one is clicked
  • Manages aria-expanded attributes for accessibility

Status:
The solution has been provided with a visual demonstration (GIF). The original poster is seeking clarification on where exactly to add the script in their Shopify theme. The discussion remains open as implementation guidance is still being requested.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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/

2

Hi @Digital_Imran

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');
      }
    });
  });
});
3

1734511985983-20241218_163518.gif

4

Thank you so much @Kyle_liu . Where I should add this script ? Can you please tell me . :slightly_smiling_face:

5

Hello

Thank you so much @Kyle_liu . Where should I add this script? Can you please tell me .

6

Hello @Kyle_liu thanks for replying , I added my comment I will highly appreciate your response