https://www.elle.cz/js/core/disclosureGroup.js

1import {setAriaExpanded} from './aria.js';
2
3export function createExclusiveDisclosureGroup({container, itemSelector, headerSelector, expandedClass}) {
4  if (!container) {
5    return null;
6  }
7
8  const items = Array.from(container.querySelectorAll(itemSelector));
9
10  const setExpanded = (item, isExpanded) => {
11    const header = item.querySelector(headerSelector);
12    item.classList.toggle(expandedClass, isExpanded);
13    setAriaExpanded(header, isExpanded);
14  };
15
16  let initialExpandedItem = null;
17  items.forEach((item) => {
18    if (!item.classList.contains(expandedClass)) {
19      setExpanded(item, false);
20      return;
21    }
22
23    if (!initialExpandedItem) {
24      initialExpandedItem = item;
25      setExpanded(item, true);
26      return;
27    }
28
29    setExpanded(item, false);
30  });
31
32  const openOnly = (targetItem) => {
33    items.forEach((item) => {
34      setExpanded(item, item === targetItem);
35    });
36  };
37
38  items.forEach((item) => {
39    const header = item.querySelector(headerSelector);
40    if (!header) {
41      return;
42    }
43
44    header.addEventListener('click', () => {
45      if (item.classList.contains(expandedClass)) {
46        setExpanded(item, false);
47        return;
48      }
49
50      openOnly(item);
51    });
52  });
53
54  return {openOnly};
55}