diff --git a/src/_includes/docs/learning-resources-index/side-filters.liquid b/src/_includes/docs/learning-resources-index/side-filters.liquid
index 5cb629df77..600b0610d9 100644
--- a/src/_includes/docs/learning-resources-index/side-filters.liquid
+++ b/src/_includes/docs/learning-resources-index/side-filters.liquid
@@ -1,4 +1,16 @@
+<input type="checkbox" id="close-filter-toggle" hidden>
+<div id="resource-filter-group-wrapper">
 <div id="resource-filter-group">
+<div class="filter-header">
+      <label for="close-filter-toggle" class="close-icon" aria-hidden="true">
+        <span class="material-symbols">close</span>
+      </label>
+    </div>
+<div class="filter-header">
+      <label for="close-filter-toggle" class="close-icon" aria-hidden="true">
+        <span class="material-symbols">close</span>
+      </label>
+    </div>
     <div class="table-title">Filter by</div>
     <div class="table-content">
         <h4>Subject</h4>
@@ -33,3 +45,5 @@
         </ul>
     </div>
 </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/content/assets/js/learning-resources-index.js b/src/content/assets/js/learning-resources-index.js
index b89d02b223..f53c693e54 100644
--- a/src/content/assets/js/learning-resources-index.js
+++ b/src/content/assets/js/learning-resources-index.js
@@ -265,21 +265,43 @@ function _setupDropdownMenu() {
     if (!pageContent) return;
 
     const filtersButton = pageContent.querySelector('.show-filters-button');
-    const filtersEl = pageContent.querySelector('.right-col');
+    const filtersEl = document.getElementById('resource-filter-group-wrapper') || pageContent.querySelector('.right-col');
+    const closeToggleCheckbox = document.getElementById('close-filter-toggle');
+
     if (!filtersButton || !filtersEl) return;
 
     function _closeMenu() {
-        filtersEl.classList.remove('show');
-        filtersButton.ariaExpanded = 'false';
+        if (closeToggleCheckbox) {
+            closeToggleCheckbox.checked = true; 
+          } else {
+            filtersEl.classList.remove('show');
+          }
+          filtersButton.ariaExpanded = 'false';
     }
+    
+    function _openMenu() {
+        if (closeToggleCheckbox) {
+          closeToggleCheckbox.checked = false; 
+        } else {
+          filtersEl.classList.add('show');
+        }
+        filtersButton.ariaExpanded = 'true';
+      }
 
-    filtersButton.addEventListener('click', (_) => {
-        if (filtersEl.classList.contains('show')) {
-            _closeMenu();
+      function _isMenuOpen() {
+        if (closeToggleCheckbox) {
+          return !closeToggleCheckbox.checked;
         } else {
-            filtersEl.classList.add('show');
-            filtersButton.ariaExpanded = 'true';
+          return filtersEl.classList.contains('show');
         }
+      }
+
+    filtersButton.addEventListener('click', (_) => {
+        if (_isMenuOpen()) {
+            _closeMenu();
+          } else {
+            _openMenu();
+          }
     });
 
     document.addEventListener('keydown', (event) => {
@@ -290,12 +312,13 @@ function _setupDropdownMenu() {
 
     // Close the dropdown if anywhere not in the filters menu is.
     const content = document.getElementById('all-resources-grid');
-    content.addEventListener('click', (_) => {
-        if (!filtersEl.classList.contains('show')) {
-            return;
-        }
-        _closeMenu();
-    });
+    if (content) {
+        content.addEventListener('click', () => {
+          if (_isMenuOpen()) {
+            _closeMenu();
+          }
+        });
+    }
 }
 
 function shuffleElements(container) {