This code should make a slider open by clicking an icon(arrow) whenever i try to open that slider it gives me that error (accordionHeader.addEventListener is not a fuction)
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') returns a NodeList so accordionHeader.addEventListener will not work.
I think you're looking for item.querySelector instead. Change your code to this
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')
}
}