diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 1290fd3..94e74f4 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -886,6 +886,25 @@ p.badge { } .faq-question { + display: flex; + padding: 1rem 0; + cursor: pointer; + align-items: center; + width: fit-content; + text-decoration: none; + background: none; + text-align: left; + color: var(--color-text); + margin: 0; + font-size: var(--font-size-3); + border-radius: 0px; +} + +.faq-question:focus { + outline: none; + border: none; + box-shadow: none; + color: var(--color-brand); display: flex; padding: 1rem 0; cursor: pointer; diff --git a/src/assets/js/faq.js b/src/assets/js/faq.js index 38824a4..d3e014b 100644 --- a/src/assets/js/faq.js +++ b/src/assets/js/faq.js @@ -14,10 +14,12 @@ document.addEventListener('DOMContentLoaded', function() { if (currentlyOpen && currentlyOpen !== answer) { currentlyOpen.style.display = 'none'; currentlyOpen.classList.remove('active'); + currentlyOpen.hidden = true; // Reset the arrow of the previously active question var activeQuestion = document.querySelector('.faq-question.active'); if (activeQuestion) { activeQuestion.classList.remove('active'); + activeQuestion.setAttribute('aria-expanded', 'false'); var activeArrow = activeQuestion.querySelector('.arrow'); activeArrow.style.transform = ''; // Reset rotation } @@ -29,11 +31,14 @@ document.addEventListener('DOMContentLoaded', function() { answer.classList.remove('active'); this.classList.remove('active'); // Update question active state arrow.style.transform = ''; // Reset rotation + answer.hidden = true; } else { answer.style.display = 'block'; answer.classList.add('active'); this.classList.add('active'); // Update question active state + this.setAttribute('aria-expanded', 'true'); arrow.style.transform = 'rotate(-180deg)'; // Rotate arrow + answer.hidden = false; } }); }); diff --git a/src/index.html b/src/index.html index 239cc3c..b80bdfb 100644 --- a/src/index.html +++ b/src/index.html @@ -194,10 +194,11 @@

Frequently Asked Questions