https://firmendo-test.netlify.app/faq.js

1(function () {
2  function getQuestion(item) {
3    return item ? item.querySelector('.faq-q') : null;
4  }
5
6  function getAnswer(item) {
7    return item ? item.querySelector('.faq-a') : null;
8  }
9
10  function closeItem(item) {
11    const question = getQuestion(item);
12    item.classList.remove('open');
13    if (question) question.setAttribute('aria-expanded', 'false');
14  }
15
16  function openItem(item) {
17    const question = getQuestion(item);
18    item.classList.add('open');
19    if (question) question.setAttribute('aria-expanded', 'true');
20  }
21
22  function setupFaq() {
23    document.querySelectorAll('.faq-item').forEach((item, index) => {
24      const question = getQuestion(item);
25      const answer = getAnswer(item);
26      if (!question || !answer) return;
27
28      if (question.tagName === 'BUTTON' && !question.hasAttribute('type')) {
29        question.setAttribute('type', 'button');
30      }
31
32      if (question.tagName !== 'BUTTON') {
33        question.setAttribute('role', 'button');
34        question.setAttribute('tabindex', '0');
35      }
36
37      if (!answer.id) {
38        answer.id = `faq-answer-${index + 1}`;
39      }
40
41      question.setAttribute('aria-controls', answer.id);
42      question.setAttribute('aria-expanded', item.classList.contains('open') ? 'true' : 'false');
43
44      const icon = question.querySelector('.faq-q-icon');
45      if (icon) icon.setAttribute('aria-hidden', 'true');
46    });
47  }
48
49  function toggleItem(question) {
50    const item = question.closest('.faq-item');
51    if (!item) return;
52
53    const wasOpen = item.classList.contains('open');
54    document.querySelectorAll('.faq-item.open').forEach(closeItem);
55
56    if (!wasOpen) {
57      openItem(item);
58    }
59  }
60
61  document.addEventListener('DOMContentLoaded', setupFaq);
62
63  document.addEventListener('click', (event) => {
64    const question = event.target.closest('.faq-q');
65    if (!question) return;
66
67    event.preventDefault();
68    toggleItem(question);
69  });
70
71  document.addEventListener('keydown', (event) => {
72    if (event.key !== 'Enter' && event.key !== ' ') return;
73
74    const question = event.target.closest('.faq-q');
75    if (!question) return;
76
77    event.preventDefault();
78    toggleItem(question);
79  });
80})();