https://www.the50.com/filestore/js/about-accordion.js

1(() => {
2  'use strict';
3
4  document.addEventListener('DOMContentLoaded', () => {
5    const groups = document.querySelectorAll('.about-accordion-group');
6    if (!groups.length) return;
7
8    groups.forEach((group, g) => {
9      const items = group.querySelectorAll('.about-accordion-item');
10
11      items.forEach((item, i) => {
12        const trigger = item.querySelector('.about-accordion-trigger');
13        const panel = item.querySelector('.about-accordion-panel');
14        if (!trigger || !panel) return;
15
16        trigger.id = `about-accordion-trigger-${g}-${i}`;
17        panel.id = `about-accordion-panel-${g}-${i}`;
18        trigger.setAttribute('aria-controls', panel.id);
19        panel.setAttribute('role', 'region');
20        panel.setAttribute('aria-labelledby', trigger.id);
21
22        trigger.addEventListener('click', () => {
23          const open = trigger.getAttribute('aria-expanded') === 'true';
24
25          group
26            .querySelectorAll('.about-accordion-trigger[aria-expanded="true"]')
27            .forEach((other) => {
28              other.setAttribute('aria-expanded', 'false');
29              const otherPanel = document.getElementById(other.getAttribute('aria-controls'));
30              if (otherPanel) otherPanel.hidden = true;
31            });
32
33          trigger.setAttribute('aria-expanded', String(!open));
34          panel.hidden = open;
35        });
36      });
37    });
38  });
39})();