show/hide filters

app/views/entries/index.html.erb

@@ -46,14 +46,6 @@
           </div>
         <% end %>
 
-        <button type="button"
-                class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center"
-                aria-expanded="false"
-                aria-controls="entries_filters"
-                data-toggle-filters>
-          Show Filters
-        </button>
-
         <div id="entries_filters" class="hidden">
           <%= render "entries/filters" %>
         </div>
@@ -67,17 +59,19 @@
 </div>
 
 <script>
-  (function () {
-    const toggle = document.querySelector("[data-toggle-filters]");
-    const panel = document.getElementById("entries_filters");
-    if (!toggle || !panel) {
+  document.addEventListener("click", function (event) {
+    const toggle = event.target.closest("[data-toggle-filters]");
+    if (!toggle) {
       return;
     }
 
-    toggle.addEventListener("click", function () {
-      const isHidden = panel.classList.toggle("hidden");
-      toggle.setAttribute("aria-expanded", (!isHidden).toString());
-      toggle.textContent = isHidden ? "Show Filters" : "Hide Filters";
-    });
-  })();
+    const panel = document.getElementById("entries_filters");
+    if (!panel) {
+      return;
+    }
+
+    const isHidden = panel.classList.toggle("hidden");
+    toggle.setAttribute("aria-expanded", (!isHidden).toString());
+    toggle.textContent = isHidden ? "Show Filters" : "Hide Filters";
+  });
 </script>