a better filter for categories

src/layouts/products.njk

@@ -4,24 +4,26 @@
 
      {{content | safe}}
 
-     <div class="filter">
-
-          {# create the category array  #}
-          {% set categories = [] %}
-
-          {# fill the array with the categories #}
-          {% for item in products.entities %}
-               {% if not item.tag in categories %}
-                    {% set categories = (categories.push(item.tag), categories) %}
-               {% endif %}
-          {% endfor %}
+     {# create the category array  #}
+     {% set categories = [] %}
 
+     {# fill the array with the categories #}
+     {% for item in products.entities %}
+          {% if not item.tag in categories %}
+               {% set categories = (categories.push(item.tag), categories) %}
+          {% endif %}
+     {% endfor %}
+     {# create the UI #}
+     <ul class="filter">
           {% for category in categories %}
                <li>
                     <button data-tag="{{category | slugify}}" class="trigger-category">{{category}}</button>
                </li>
           {% endfor %}
-     </div>
+          <li>
+               <button data-tag="all" class="trigger-category">All</button>
+          </li>
+     </ul>
 
      <div class="grid">
 
@@ -42,12 +44,12 @@
 {% endblock %}
 
 {% block customScripts %}
-{# super will keep all the other custom scripts needed to make one single script #}
-{{ super() }}
+     {# super will keep all the other custom scripts needed to make one single script #}
+     {{ super() }}
      <script>
           let list = document.querySelectorAll('.grid-item');
           console.log(list);
-          
+
           document
                .querySelectorAll('.trigger-category')
                .forEach(button => {
@@ -58,14 +60,20 @@
                })
 
           function filterClass(list, filter) {
-               for (item of list) {
-                    console.log(item);
+               if (filter == "all") {
+                    for (item of list) {
+                         item.style.display = "block";
+                    }
+               } else {
+
+                    for (item of list) {
 
-                    if (item.classList.contains(filter)) {
-                         item
-                              .classList
-                              .toggle('hideTag');
-                    } 
+                         if (!item.classList.contains(filter)) {
+                              item.style.display = "none";
+                         } else {
+                              item.style.display = "block"
+                         }
+                    }
                }
 
           }