Auto-Close Filter Tabs on Open in Impact Theme

Store Design
, ,
1

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

filter.PNG
filter.PNG1849Ă—735 149 KB

2

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.
  1. 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');
      }
    });
  });
});
  1. 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.
  1. 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 !