Auto-Close Filter Tabs on Open in Impact Theme

[Digital_Imran]

I want the previously opened filter tab to close automatically when I open a new filter tab. I am using the Impact theme.
Website URL : https://myperfectwear.com/collections/journals-notebooks

[mageplaza-cs · Accepted solution]

Hi @Digital_Imran, 
I am from Mageplaza - Shopify solution expert.

To change the expand/collapse behavior of the filter in your Shopify store, you'll need to modify the CSS and JS in your theme. Here are some suggestions to help you achieve this:

1.  Locate the JavaScript File:

• In your Shopify admin, go to Online Store > Themes.
• Find the Impact theme and click Actions > Edit Code.
• Navigate to the JavaScript file responsible for filter functionality in the Assets folder.

     2. Modify the JavaScript Code: 

• Add or modify the JavaScript code to manage the expand/collapse behavior. Below is an example:     

document.addEventListener('DOMContentLoaded', function () {
  const filterHeaders = document.querySelectorAll('.filter-tab-header'); // Adjust selector based on your theme

  filterHeaders.forEach((header) => {
    header.addEventListener('click', () => {
      // Close all other filter tabs
      filterHeaders.forEach((otherHeader) => {
        if (otherHeader !== header) {
          const otherContent = otherHeader.nextElementSibling; // Adjust based on your theme structure
          if (otherContent && otherContent.classList.contains('open')) {
            otherContent.classList.remove('open');
            otherContent.style.height = 0; // Collapses the content
          }
        }
      });

      // Toggle the clicked tab
      const content = header.nextElementSibling; // Adjust based on your theme structure
      if (content) {
        const isOpen = content.classList.contains('open');
        content.style.height = isOpen ? 0 : `${content.scrollHeight}px`;
        content.classList.toggle('open');
      }
    });
  });
});

 3. Add Necessary CSS:

  Ensure the filter tabs respond visually when opened or closed. Add this to your CSS file (e.g., theme.css or base.css):

.filter-tab-content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.filter-tab-content.open {
  height: auto;
}

• Replace .filter-tab-header and .filter-tab-content with the actual class names used in your theme.
• Use your browser’s Inspect Element tool to identify the correct selectors.

4. Save and test:

• Save the JavaScript and CSS changes.
• Preview your store.
• Open and close filter tabs to ensure the functionality works as intended.

I hope this helps, please leave a comment if you need further instructions !