https://www.mup.com.au/assets/controllers/accordian_controller-f57bb175.js

1import Reveal from "@stimulus-components/reveal";
2
3/*
4Extend the reveal controller into an accordian. Mostly just inheriting item & class.
5The aim is to have controllers handle one type of event which is why I haven't 
6mixed this into reveal_controller, even though they are pretty similar.
7*/
8
9export default class extends Reveal {
10  static targets = ["icon"];
11
12  handleClickEvent = (event) => {
13    const isClickOutside = !this.element.contains(event.target);
14
15    if (this.isActive && isClickOutside) {
16      this.toggle(event);
17    }
18  }
19
20  toggle(event) {
21    this.accordianName = event.target.dataset.accordianName;
22
23    this.toggleIcons();
24    this.toggleAccordians();
25    this.toggleListeners();
26  }
27
28  toggleAccordians() {
29    this.accordians.forEach((item) =>
30      this.classNames(item).forEach((name) => item.classList.toggle(name))
31    );
32  }
33
34  toggleIcons() {
35    this.icons.forEach((item) => item.classList.toggle(this.class));
36  }
37
38  toggleListeners() {
39    if (this.isActive) {
40      document.addEventListener("click", this.handleClickEvent);
41    } else {
42      document.removeEventListener("click", this.handleClickEvent);
43    }
44  }
45
46  classNames(item) {
47    const { accordianClassNames } = item.dataset;
48    const classNames = [this.class];
49
50    if (accordianClassNames) {
51      classNames.push(accordianClassNames.split(" "));
52    }
53
54    return classNames.flat();
55  }
56
57  get accordians() {
58    return this.itemTargets.filter(
59      (item) =>
60        !item.classList.contains(this.class) ||
61        item.dataset.accordianName === this.accordianName
62    );
63  }
64
65  get accordianNames() {
66    return this.accordians.map((item) => item.dataset.accordianName);
67  }
68
69  get icons() {
70    return this.iconTargets.filter((item) =>
71      this.accordianNames.includes(item.dataset.accordianName)
72    );
73  }
74
75  get isActive() {
76    if (this.accordians.length) {
77      return this.accordians.every(
78        (item) => !item.classList.contains(this.class)
79      );
80    }
81
82    return false;
83  }
84}