feat: created a jQuery accordion plugin for the filters

_dev/js/theme.js

@@ -85,28 +85,67 @@ $(function () {
     allowPageScroll: "vertical",
   });
 
-  $("#products_top_sidebar").offcanvas({
-    effect: "slide-in-over",
-    overlay: true,
-    classes: {
-      element: "absolute top-0 z-50",
-    },
+  // $("#products_top_sidebar").offcanvas({
+  //   effect: "slide-in-over",
+  //   overlay: true,
+  //   classes: {
+  //     element: "absolute top-0 z-50",
+  //   },
+  // });
+  //
+  // $("#show_filters").on("click", function () {
+  //   $("#products_top_sidebar").offcanvas("toggle");
+  // });
+
+  function ThAccordion() {}
+
+  $.extend(ThAccordion.prototype, {
+    init() {},
   });
 
-  $("#show_filters").on("click", function () {
-    $("#products_top_sidebar").offcanvas("toggle");
-  });
+  $.fn["thaccordion"] = function () {
+    var selectors = {
+      root: ".th-accordion",
+      item: ".th-accordion-item",
+      trigger: ".th-accordion-item-trigger",
+      content: ".th-accordion-item-content",
+    };
+    let selection = null;
+    let items = this.find(selectors.item);
 
-  $("button[id^=show-filters-]").on("click", function () {
-    var filterName = $(this).data("filter-name");
+    function collapseAll() {
+      items.each(function () {
+        $(this).find(selectors.content).hide(500);
+      });
+    }
 
-    //hide all the other sections and display the current chosen filter
-    $("div[id^=filter-section-]").hide();
-    $("#filter-section-" + filterName).show();
-  });
+    function open() {
+      collapseAll();
+      $(selection).find(selectors.content).show(500);
+    }
 
-  $("#show-sort-by").on("click", function () {
-    $("div[id^=filter-section-]").hide();
-    $("#filter-section-sort-by").toggle();
-  });
+    function isOpen(item) {
+      return $(item).find(selectors.content).is(":visible");
+    }
+
+    collapseAll();
+
+    items.each(function () {
+      var self = this;
+      $(this)
+        .find(selectors.trigger)
+        .on("click", function () {
+          if (selection === self) {
+            selection = null;
+          } else {
+            selection = self;
+            if (!isOpen(selection)) {
+              open();
+            }
+          }
+        });
+    });
+  };
+
+  $(".th-accordion").thaccordion();
 });