highlighting the latest faq entry

eupnea-project · Nov 19, 2023 · ec040c5 · ec040c5
1 parent 54adf68
commit ec040c5
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/components/FAQEntry.vue b/components/FAQEntry.vue
@@ -55,9 +55,19 @@ function onClick(ev) {
         href.hash = myHash;
         window.history.replaceState({}, "", href);
         scrollToEntry();
+        highlightLatestOpened();
     }
 }
 
+function highlightLatestOpened() {
+    // Remove highlight from all FAQ entries
+    const faqEntries = document.querySelectorAll(".faq-entry");
+    faqEntries.forEach((entry) => entry.classList.remove("latest-opened"));
+
+    // Add highlight to the current FAQ entry
+    entryRef.value.classList.add("latest-opened");
+}
+
 onMounted(() => {
     checkIsActive();
 });
@@ -98,6 +108,10 @@ a.faq-question {
     border-radius: 8px;
 }
 
+.faq-entry:hover {
+  box-shadow: 0 0 10px #409D86;
+}
+
 .faq-entry summary {
     display: inline;
     margin: 0;
@@ -126,5 +140,14 @@ a.faq-question {
 .faq-entry[open] {
     color: var(--vp-c-text-1);
     border-color: var(--vp-custom-block-tip-border);
+    border-color: #409D86;
+    border-width: 2px;
+    box-shadow: 0 0 10px #409D86;
+}
+
+.latest-opened {
+    border-color: #409D86;
+    border-width: 2px;
+    box-shadow: 0 0 10px #409D86;
 }
 </style>