Hiding empty titles in accordion when filters inside it are empty

How To
1

How to hide empty filters nested in accordions in Bricks Builder.

I wanted to share a useful solution if anyone is building an online store with query filtering

in my case, i wanted to filter many attributes which needed to be grouped. i did the grouping based on the accordion inside which i nested the filters.
Unfortunately, not every product has a specific attribute and the archive displays all possible filters, I wanted to hide those (groups/categories) which are empty.

Since bricks builder does not natively offer such an option, I wrote a script which may be useful to hide in the frontend the filter groups which do not contain any filters for the currently displayed products.

It works with AJAX and after load page.
Video how it works:

.sidebar-filters-wrapper
it’s a class which is a container/block that holds the whole sidebar with filters. you can customize it to suit you


(function () {
  function updateVisibleFilters() {
    const filterLists = document.querySelectorAll(".brxe-filter-checkbox, .brxe-filter-radio");

    filterLists.forEach(list => {
      const wrapper = list.closest(".brxe-block.listening");
      if (!wrapper) return;

      const items = list.querySelectorAll("li");
      const itemCount = items.length;

      if (itemCount === 0) {
        wrapper.style.display = "none";
      } else {
        wrapper.style.display = ""; 
      }
    });
  }

  function observeFilters() {
    const target = document.querySelector(".sidebar-filters-wrapper");
    if (!target) return;

    const observer = new MutationObserver(() => {
      updateVisibleFilters();
    });

    observer.observe(target, {
      childList: true,
      subtree: true
    });
  }

  function init() {
    updateVisibleFilters();

    observeFilters();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => {
      setTimeout(init, 100);
    });
  } else {
    setTimeout(init, 100);
  }
})();