✨feature: Rework dropdowns

assets/script.js

@@ -1,5 +1,5 @@
 jQuery(document).ready(function ($) {
-  function triggerFiltering(paged = 1) {
+  function triggerFiltering() {
     let searchTerm = $('#search').val();
 
     let selectedTypes = $('input[name="resource_type[]"]:checked')
@@ -66,7 +66,6 @@ jQuery(document).ready(function ($) {
         })
         .get(),
       sort_order: $('#sort-order').val(),
-      paged: paged,
     };
 
     $.post(resourceFilterAjax.ajaxurl, formData, function (response) {
@@ -107,25 +106,45 @@ jQuery(document).ready(function ($) {
     }
 
     // Re-trigger filtering after removing the filter
-    triggerFiltering(1);
+    triggerFiltering();
   });
 
   // Handle form submission
   $('#resource-filter').on('submit', function (e) {
     e.preventDefault();
-    triggerFiltering(1);
+    triggerFiltering();
   });
 
   // Handle sort order change
   $('#sort-order').on('change', function () {
-    triggerFiltering(1);
-  });
-
-  // Handle pagination
-  $(document).on('click', '.pagination a', function (e) {
-    e.preventDefault();
-
-    let paged = $(this).attr('href').match(/paged=(\d+)/)[1];
-    triggerFiltering(paged);
+    triggerFiltering();
+  });
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Toggle dropdown visibility
+  document.querySelectorAll('.custom-dropdown .dropdown-toggle').forEach(function (button) {
+    button.addEventListener('click', function () {
+      const dropdown = this.parentElement;
+
+      // Close all other dropdowns
+      document.querySelectorAll('.custom-dropdown').forEach(function (otherDropdown) {
+        if (otherDropdown !== dropdown) {
+          otherDropdown.classList.remove('open');
+        }
+      });
+
+      // Toggle the current dropdown
+      dropdown.classList.toggle('open');
+    });
+  });
+
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', function (event) {
+    if (!event.target.closest('.custom-dropdown')) {
+      document.querySelectorAll('.custom-dropdown').forEach(function (dropdown) {
+        dropdown.classList.remove('open');
+      });
+    }
   });
 });

assets/style.css

@@ -25,33 +25,62 @@
   margin-bottom: 1.25rem;
   position: relative;
 
-  details {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    flex: 1; /* Ensures equal width but allows independent height */
-    margin-bottom: 10px;
-    max-height: 4rem;
-    overflow: hidden;
-    padding: 8px;
-    transition: max-height 0.8s ease;
-    width: 100%;
-  }
-
-  details[open] {
-    max-height: 65rem; /* Adjust based on expected content */
-  }
-
-  summary {
-    cursor: pointer;
-    font-weight: bold;
-  }
-
   .filter-options { padding-top: .5rem; }
 
   .filter-options label {
     display: block;
     margin-bottom: 5px;
   }
+
+  /* Dropdown Container */
+  .custom-dropdown {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+  }
+
+  /* Dropdown Button */
+  .custom-dropdown .dropdown-toggle {
+    background: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 10px 15px;
+  }
+
+  /* Dropdown Menu (Hidden by Default) */
+  .custom-dropdown .dropdown-menu {
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: none;
+    left: 0;
+    max-height: fit-content;
+    overflow-y: auto;
+    padding: 10px;
+    position: absolute;
+    top: 100%;
+    z-index: 10;
+    width: 100%;
+  }
+
+  /* Show Dropdown Menu */
+  .custom-dropdown.open .dropdown-menu {
+    display: grid;
+    gap: .5rem;
+    grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
+  }
+
+  /* Checkbox Labels */
+  .dropdown-menu label {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .dropdown-menu input[type="checkbox"] {
+    margin-right: 8px;
+  }
 }
 
 #resource-filter-summary {

templates/filter-form.php

@@ -9,8 +9,9 @@ $resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' =
 <form id="resource-filter">
   <!-- Search Field-->
   <div class="search-text">
-    <input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($_GET['search']) ? esc_attr($_GET['search']) : ''; ?>">
+    <input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
 
+    <button type="reset" id="clear-search">&times;</button>
     <button type="submit">Filter</button>
   </div>
 

templates/filter-summary.php

@@ -1,8 +1,6 @@
 <?php
 if (!defined('ABSPATH')) { exit; } // Prevent direct access
 
-error_log('Filter Summary: ' . print_r($_POST, true));
-
 // Get count from AJAX or direct POST
 $count = isset($resTotal) ? esc_html($resTotal) : 0;