Вот так должно работать
document.addEventListener('DOMContentLoaded', () => {
const accordions = document.querySelectorAll('.accordion');
accordions.forEach(el => {
el.addEventListener('click', (e) => {
const self = e.currentTarget;
const control = self.querySelector('.accordion__control');
const content = self.querySelector('.accordion__content');
accordions.forEach(el => {
const control = el.querySelector('.accordion__control');
const content = el.querySelector('.accordion__content');
if(self !== el){
el.classList.remove('open');
control.setAttribute('aria-expanded', false);
content.setAttribute('aria-hidden', true);
content.style.maxHeight = null;
}
})
self.classList.toggle('open');
if (self.classList.contains('open')) {
control.setAttribute('aria-expanded', true);
content.setAttribute('aria-hidden', false);
content.style.maxHeight = content.scrollHeight + 'px';
} else {
control.setAttribute('aria-expanded', false);
content.setAttribute('aria-hidden', true);
content.style.maxHeight = null;
}
})
})
});