| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-faqc-wrapper').forEach(function (wrap) { |
| 5 |
var allowMultiple = wrap.getAttribute('data-allow-multiple') === '1'; |
| 6 |
var iconType = wrap.getAttribute('data-icon-type') || 'plus'; |
| 7 |
var navBtns = [].slice.call(wrap.querySelectorAll('.bkbg-faqc-nav-item')); |
| 8 |
var panels = [].slice.call(wrap.querySelectorAll('.bkbg-faqc-panel')); |
| 9 |
var faqItems = [].slice.call(wrap.querySelectorAll('.bkbg-faqc-item')); |
| 10 |
var searchEl = wrap.querySelector('.bkbg-faqc-search-global, .bkbg-faqc-search'); |
| 11 |
|
| 12 |
function iconFor(open) { |
| 13 |
if (iconType === 'chevron') return open ? '▲' : '▼'; |
| 14 |
if (iconType === 'arrow') return open ? '↑' : '↓'; |
| 15 |
return open ? '−' : '+'; |
| 16 |
} |
| 17 |
|
| 18 |
/* ── Category nav ──────────────────────────────────────────────── */ |
| 19 |
function showCategory(catId) { |
| 20 |
navBtns.forEach(function (btn) { |
| 21 |
var isTarget = btn.getAttribute('data-cat') === catId; |
| 22 |
btn.classList.toggle('is-active', isTarget); |
| 23 |
btn.setAttribute('aria-selected', isTarget ? 'true' : 'false'); |
| 24 |
}); |
| 25 |
panels.forEach(function (panel) { |
| 26 |
var isTarget = panel.getAttribute('data-cat') === catId; |
| 27 |
panel.style.display = isTarget ? '' : 'none'; |
| 28 |
panel.setAttribute('aria-hidden', isTarget ? 'false' : 'true'); |
| 29 |
}); |
| 30 |
} |
| 31 |
|
| 32 |
navBtns.forEach(function (btn) { |
| 33 |
btn.addEventListener('click', function () { |
| 34 |
showCategory(btn.getAttribute('data-cat')); |
| 35 |
}); |
| 36 |
}); |
| 37 |
|
| 38 |
/* ── FAQ accordion ─────────────────────────────────────────────── */ |
| 39 |
faqItems.forEach(function (item) { |
| 40 |
var qBtn = item.querySelector('.bkbg-faqc-q'); |
| 41 |
var aEl = item.querySelector('.bkbg-faqc-a'); |
| 42 |
var iconEl = item.querySelector('.bkbg-faqc-icon'); |
| 43 |
if (!qBtn || !aEl) return; |
| 44 |
|
| 45 |
/* Respect initial state saved in HTML */ |
| 46 |
var startOpen = item.getAttribute('data-open') === '1'; |
| 47 |
aEl.style.display = startOpen ? '' : 'none'; |
| 48 |
aEl.setAttribute('aria-hidden', startOpen ? 'false' : 'true'); |
| 49 |
qBtn.setAttribute('aria-expanded', startOpen ? 'true' : 'false'); |
| 50 |
if (iconEl) iconEl.textContent = iconFor(startOpen); |
| 51 |
|
| 52 |
qBtn.addEventListener('click', function () { |
| 53 |
var isExpanded = qBtn.getAttribute('aria-expanded') === 'true'; |
| 54 |
|
| 55 |
/* Close siblings in same panel if !allowMultiple */ |
| 56 |
if (!allowMultiple && !isExpanded) { |
| 57 |
var parentPanel = item.closest('.bkbg-faqc-panel') || wrap; |
| 58 |
parentPanel.querySelectorAll('.bkbg-faqc-item').forEach(function (sibling) { |
| 59 |
if (sibling === item) return; |
| 60 |
var sq = sibling.querySelector('.bkbg-faqc-q'); |
| 61 |
var sa = sibling.querySelector('.bkbg-faqc-a'); |
| 62 |
var si = sibling.querySelector('.bkbg-faqc-icon'); |
| 63 |
if (sq && sa) { |
| 64 |
sa.style.display = 'none'; |
| 65 |
sa.setAttribute('aria-hidden', 'true'); |
| 66 |
sq.setAttribute('aria-expanded', 'false'); |
| 67 |
if (si) si.textContent = iconFor(false); |
| 68 |
} |
| 69 |
}); |
| 70 |
} |
| 71 |
|
| 72 |
var nextOpen = !isExpanded; |
| 73 |
aEl.style.display = nextOpen ? '' : 'none'; |
| 74 |
aEl.setAttribute('aria-hidden', nextOpen ? 'false' : 'true'); |
| 75 |
qBtn.setAttribute('aria-expanded', nextOpen ? 'true' : 'false'); |
| 76 |
if (iconEl) iconEl.textContent = iconFor(nextOpen); |
| 77 |
}); |
| 78 |
}); |
| 79 |
|
| 80 |
/* ── Search ────────────────────────────────────────────────────── */ |
| 81 |
if (searchEl) { |
| 82 |
searchEl.addEventListener('input', function () { |
| 83 |
var query = searchEl.value.toLowerCase().trim(); |
| 84 |
|
| 85 |
/* If there's a global search, we search across ALL panels */ |
| 86 |
var isGlobal = searchEl.classList.contains('bkbg-faqc-search-global'); |
| 87 |
|
| 88 |
if (isGlobal && query) { |
| 89 |
/* Show all panels temporarily so items are searchable */ |
| 90 |
panels.forEach(function (p) { p.style.display = ''; p.setAttribute('aria-hidden', 'false'); }); |
| 91 |
navBtns.forEach(function (b) { b.classList.remove('is-active'); }); |
| 92 |
} |
| 93 |
|
| 94 |
faqItems.forEach(function (item) { |
| 95 |
var q = item.querySelector('.bkbg-faqc-q'); |
| 96 |
var a = item.querySelector('.bkbg-faqc-a'); |
| 97 |
var qText = (q && q.textContent) || ''; |
| 98 |
var aText = (a && a.textContent) || ''; |
| 99 |
var match = !query || qText.toLowerCase().indexOf(query) !== -1 || aText.toLowerCase().indexOf(query) !== -1; |
| 100 |
item.classList.toggle('is-hidden', !match); |
| 101 |
}); |
| 102 |
|
| 103 |
/* Restore nav/panel state when search cleared */ |
| 104 |
if (isGlobal && !query) { |
| 105 |
var firstBtn = navBtns[0]; |
| 106 |
if (firstBtn) showCategory(firstBtn.getAttribute('data-cat')); |
| 107 |
faqItems.forEach(function (item) { item.classList.remove('is-hidden'); }); |
| 108 |
} |
| 109 |
}); |
| 110 |
} |
| 111 |
}); |
| 112 |
})(); |
| 113 |
|
