✨feature: Filters

assets/script.js

@@ -2,12 +2,34 @@ jQuery(document).ready(function ($) {
   $('#resource-filter').on('submit', function (e) {
     e.preventDefault();
 
+    let searchTerm = $('#search').val();
+
+    let selectedTypes = $('input[name="resource_type[]"]:checked').map(function () {
+      return $(this).closest('label').text().trim();
+    }).get();
+
+    let selectedSubjects = $('input[name="resource_subject[]"]:checked').map(function () {
+      return $(this).closest('label').text().trim();
+    }).get();
+
+    let appliedFilters = [];
+
+    if (searchTerm) appliedFilters.push(`<strong>Search:</strong> "${searchTerm}"`);
+    if (selectedTypes.length > 0) appliedFilters.push(`<strong>Type:</strong> ${selectedTypes.join(', ')}`);
+    if (selectedSubjects.length > 0) appliedFilters.push(`<strong>Subject:</strong> ${selectedSubjects.join(', ')}`);
+
+    $('#applied-filters').html(appliedFilters.length ? appliedFilters.join(' | ') : 'None');
+
     let formData = {
       action: 'filter_resources',
       nonce: resourceFilterAjax.nonce,
       search: $('#search').val(),
-      resource_type: $('#resource_type').val(),
-      resource_subject: $('#resource_subject').val(),
+      resource_type: $('input[name="resource_type[]"]:checked').map(function () {
+        return this.value;
+      }).get(),
+      resource_subject: $('input[name="resource_subject[]"]:checked').map(function () {
+        return this.value;
+      }).get()
     };
 
     $.post(resourceFilterAjax.ajaxurl, formData, function (response) {
@@ -15,13 +37,14 @@ jQuery(document).ready(function ($) {
 
       $('#resource-results').html(response.html);
       $('#result-count').text(response.count);
-
-      let filters = [];
-      if (response.filters.search) filters.push('Search: "' + response.filters.search + '"');
-      if (response.filters.resource_type) filters.push('Type: ' + $('#resource_type option:selected').text());
-      if (response.filters.resource_subject) filters.push('Subject: ' + $('#resource_subject option:selected').text());
-
-      $('#applied-filters').text(filters.length ? filters.join(', ') : 'None');
     });
   });
 });
+
+jQuery(document).on('click', function (event) {
+  jQuery('details[open]').each(function () {
+    if (!jQuery(this).is(event.target) && jQuery(this).has(event.target).length === 0) {
+      jQuery(this).removeAttr('open');
+    }
+  });
+});

assets/style.css

@@ -1,14 +1,56 @@
-#resource-filter {
+.search-text {
   display: flex;
-  gap: 1rem;
+  gap: 0;
   margin-bottom: 1.25rem;
 
-  input,
-  select,
+  .full-width {
+    border: 1px solid #ccc;
+    border-right: none;
+    font-size: 1rem;
+    padding: .5rem;
+    width: 100%;
+  }
+
   button {
     border: 1px solid #ccc;
     font-size: 1rem;
-    padding: .5rem;
+    padding: .5rem 1rem;
+  }
+}
+
+.search-tax {
+  align-items: flex-start; /* Ensures each <details> aligns to the top */
+  display: flex;
+  gap: 1rem;
+  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;
   }
 }
 
@@ -22,8 +64,8 @@
 
 #resource-results {
   display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 

resource-filter.php

@@ -47,7 +47,7 @@ class ResourceFilterPlugin {
 
     <div id="resource-filter-summary">
       <strong>Showing <span id="result-count"><?php echo $total_resources; ?></span> resources</strong>
-      <p>Filters applied: <span id="applied-filters">None</span></p>
+      <p><strong>Filters applied:</strong>  <span id="applied-filters">None</span></p>
     </div>
 
     <div id="resource-results">
@@ -71,19 +71,19 @@ class ResourceFilterPlugin {
     $tax_query = [];
 
     if (!empty($_POST['resource_type'])) {
-      $tax_query[] = [
+      $query_args['tax_query'][] = [
         'taxonomy' => 'resource_type',
-        'field' => 'slug',
-        'terms' => [sanitize_text_field($_POST['resource_type'])], // Ensure it's an array
+        'field'    => 'slug',
+        'terms'    => array_map('sanitize_text_field', $_POST['resource_type']),
         'operator' => 'IN'
       ];
     }
 
     if (!empty($_POST['resource_subject'])) {
-      $tax_query[] = [
+      $query_args['tax_query'][] = [
         'taxonomy' => 'resource_subject',
-        'field' => 'slug',
-        'terms' => [sanitize_text_field($_POST['resource_subject'])],
+        'field'    => 'slug',
+        'terms'    => array_map('sanitize_text_field', $_POST['resource_subject']),
         'operator' => 'IN'
       ];
     }

templates/filter-form.php

@@ -1,26 +1,44 @@
 <?php
 if (!defined('ABSPATH')) { exit; } // Prevent direct access
 
-$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
+$resource_types    = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
 $resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
 ?>
 
 <form id="resource-filter">
-  <input type="text" id="search" name="search" placeholder="Search resources...">
+  <!-- Search Field -->
+  <div class="search-text">
+    <input type="text" id="search" name="search" placeholder="Search resources..." class="full-width">
+    <button type="submit">Filter</button>
+  </div>
 
-  <select id="resource_type" name="resource_type">
-    <option value="">All Types</option>
-    <?php foreach ($resource_types as $type) : ?>
-      <option value="<?php echo esc_attr($type->slug); ?>"><?php echo esc_html($type->name); ?></option>
-    <?php endforeach; ?>
-  </select>
+  <div class="search-tax">
+    <!-- Resource Type Filters -->
+    <details>
+      <summary>Resource Type</summary>
 
-  <select id="resource_subject" name="resource_subject">
-    <option value="">All Subjects</option>
-    <?php foreach ($resource_subjects as $subject) : ?>
-      <option value="<?php echo esc_attr($subject->slug); ?>"><?php echo esc_html($subject->name); ?></option>
-    <?php endforeach; ?>
-  </select>
+      <div class="filter-options">
+        <?php foreach ($resource_types as $type) : ?>
+          <label>
+            <input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>">
+            <?php echo esc_html($type->name); ?>
+          </label>
+        <?php endforeach; ?>
+      </div>
+    </details>
 
-  <button type="submit">Filter</button>
+    <!-- Resource Subject Filters -->
+    <details>
+      <summary>Resource Subject</summary>
+
+      <div class="filter-options">
+        <?php foreach ($resource_subjects as $subject) : ?>
+          <label>
+            <input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>">
+            <?php echo esc_html($subject->name); ?>
+          </label>
+        <?php endforeach; ?>
+      </div>
+    </details>
+  </div>
 </form>