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