https://zeclef.com/assets/controllers/accordion_controller-u8HB_1O.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static targets = ['item', 'content'];
5
6    toggle(event) {
7        const toggle = event.currentTarget;
8        const item = toggle.closest('[data-accordion-target="item"]');
9        const content = item.querySelector('[data-accordion-target="content"]');
10        const isActive = toggle.classList.contains('is-active');
11
12        // Close all
13        this.itemTargets.forEach(i => {
14            const t = i.querySelector('.accordion__toggle');
15            const c = i.querySelector('[data-accordion-target="content"]');
16            if (t && c) {
17                t.classList.remove('is-active');
18                c.style.height = '0';
19            }
20        });
21
22        // Open clicked if it wasn't active
23        if (!isActive) {
24            toggle.classList.add('is-active');
25            content.style.height = content.scrollHeight + 'px';
26        }
27    }
28}