✨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));
 }