JavaScript toggle code works in J4 but not in J3

Question

I have some simple code that hides or shows a div (that will contain an embedded contact form) when a button is clicked.

I first set it up in J4.0.3 and it works fine, but when I tried in J3.10.2 the code 'selector' is not recognised.

Here is the code (which you can also see at [codepen.io][1]

In J3 the 'selector' at the end of the second line is not highlighted in blue in the editor as it is in the first line and as the other elements - 'test', 'tests', etc are.

for (const selector of [".toggle-form"]) {
    const tests = [...document.querySelectorAll(selector)];
    for (const test of tests) {
        test.addEventListener('click', () => {
            tests.filter(f => f !== test).forEach(f => {
            f.classList.remove('form-opened');
            f.setAttribute("aria-expanded", "false");
            });
        test.classList.toggle('form-opened');
        let ariaExpanded = test.classList.contains('form-opened').toString();
        test.setAttribute("aria-expanded", ariaExpanded);
        })
    }
}

Can anyone explain this and tell me what I need to do to make it work in J3x? Thanks.

EDIT: two screenshots showing Firefox inspector and debugger tabs

[![Firefox inspector tab][2]][2]

[![Firefox debugger tab][3]][3]

[1]: https://codepen.io/Scrabble96/pen/NWvWwOY) [2]: https://i.stack.imgur.com/mtPF0.jpg [3]: https://i.stack.imgur.com/WVfZL.jpg

Answer 1

I'm not sure why it would be working in J4, but not J3. That said, you're unecessarily using nested for loops, rather than a single forEach iterator.

You can use the following:

// Create an array using Array.from(), so that we can filter later on
const toggles = Array.from(document.querySelectorAll('.toggle-form'));

// Iterate over the array
toggles.forEach((toggle) => {
    toggle.addEventListener('click', () => {
      toggles
        .filter((f) => f !== toggle)
        .forEach((f) => {
          f.classList.remove('form-opened');
          f.setAttribute('aria-expanded', false);
        });
      toggle.setAttribute('aria-expanded', toggle.classList.contains('form-opened'));
      toggle.classList.toggle('form-opened');
    });
});

You might find this will also work on your J3 instance

Answer 2

Finally, by looking at other scripts on other J3 sites, I find that I have to wrap the code like this and it works:

window.onload=function() {
// original code as above
}

(although I still have the cross-site cookie notices, but I think that's another issue...)