Este código debería hacer que se abra un control deslizante haciendo clic en un ícono (flecha) cada vez que intento abrir ese control deslizante, me da ese error (accordionHeader.addEventListener no es una función)
const accordionItems = document.querySelectorAll('.value__accordion-item') accordionItems.forEach((item) =>{ const accordionHeader = item.querySelectorAll('.value__accordion-header') accordionHeader.addEventListener('click', () =>{ const openItem = document.querySelector('.accordion-open') toggleItem(item) if(openItem && openItem!== item){ toggleItem(openItem) } }) }) const toggleItem = (item) =>{ const accordionContent = item.querySelectorAll('.value__accordion-content') if(item.classList.contains('accordion-open')){ accordionContent.removeAttribute('style') item.classList.remove('accordion-open') } else{ accordionContent.style.header = accordionContent.scrollHeight + 'px' item.classList.add('accordion-open') } }const accordionHeader = item.querySelectorAll('.value__accordion-header') devuelve una lista de NodeList , por lo que accordionHeader.addEventListener no funcionará.
Creo que estás buscando item.querySelector en su lugar. Cambia tu código a este
const accordionItems = document.querySelectorAll('.value__accordion-item') accordionItems.forEach((item) =>{ const accordionHeader = item.querySelector('.value__accordion-header') accordionHeader.addEventListener('click', () =>{ const openItem = document.querySelector('.accordion-open') toggleItem(item) if(openItem && openItem!== item){ toggleItem(openItem) } }) }) const toggleItem = (item) =>{ const accordionContent = item.querySelector('.value__accordion-content') if(item.classList.contains('accordion-open')){ accordionContent.removeAttribute('style') item.classList.remove('accordion-open') } else{ accordionContent.style.header = accordionContent.scrollHeight + 'px' item.classList.add('accordion-open') } }