From d9fd2ad090adb195409ae3d21f6354932e87a19d Mon Sep 17 00:00:00 2001
From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com>
Date: Mon, 11 Sep 2023 17:03:02 -0400
Subject: [PATCH] Make tutorial filter buttons more recognizable (#1790)

---
 assets/js/tutorials.js           | 15 ++++++++++-----
 assets/scss/_styles_project.scss |  9 +++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/js/tutorials.js b/assets/js/tutorials.js
index 1e7a6ec194..df3bf8a7a8 100644
--- a/assets/js/tutorials.js
+++ b/assets/js/tutorials.js
@@ -216,10 +216,15 @@ search.on('render', function() {
 
 document.body.addEventListener('click', function(event) {
   let filter_box = document.getElementById('tutorial-filter-items');
-    if (!filter_box.contains(event.target)) {
-      open_elem = filter_box.getElementsByClassName("show");
-      if (open_elem) {
-        open_elem[0].classList.remove("show");
-      }
+  let tutorial_menu = document.getElementById('tutorial-menu');
+  if (!filter_box.contains(event.target) && !tutorial_menu.contains(event.target)) {
+    document.querySelectorAll('.filter').forEach( el => {
+      el.setAttribute("aria-expanded", false);
+      el.classList.add("collapsed");
+    });
+    let open_elem = filter_box.getElementsByClassName("show");
+    if (open_elem) {
+      open_elem[0].classList.remove("show");
     }
+  }
 }, true);
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index ff29366baf..035cdf6895 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -1167,6 +1167,15 @@ ul.sectionlist > li:hover {
   border: 1px solid black;
 }
 
+#tutorial-filters > .filter:hover {
+  background-color: #e7e5e4;
+  cursor: pointer;
+}
+
+#tutorial-filters > .filter[aria-expanded="true"]{
+  background-color: #e7e5e4;
+}
+
 .ais-Hits-item {
   display: flex;
 }