Accordion symbol not changing when the accordion is clicked

I'm facing an issue with the code below as if i click on an accordion it will open but the Icon symbol "+" will not transform to "-" when it's opened. the code snippet below is not being activated.

You just forgot to toggle the active class in the js script and loop through the other accordions to remove them first, based on your logic you're adding a active class to the accordion so you can change it with the css whenever you open one of the accordions.

The logic is that you take all the accordions and all the panel, you loop through all the accordions to add the click event listner: you add the + or - showcase by adding the active class only to the target and remove the it from the other non target items, and then you do the logic you've already did which is add the open class to the target only and toggle it from the other items.

const accordionEls = document.querySelectorAll('.accordion')
const panelEls = document.querySelectorAll('.panel')

accordionEls.forEach((acc) => {
    acc.addEventListener('click', ({ target }) => {
        target.classList.toggle('active')
        accordionEls.forEach(accordionEl => {
            if (accordionEl !== target) {
                accordionEl.classList.remove('active')
            }
        })
        const { nextElementSibling } = target
        panelEls.forEach(panelEl => {
            if (panelEl !== nextElementSibling) {
                panelEl.classList.remove('open')
            } else {
                panelEl.classList.toggle('open')
            }
        })
    }) 
})

also your css active state of accordion need a small fix just to adjust the orientation of the + or -

.accordion.active::after {
    /*rest of your code*/
    transform: rotate(180deg); 
    /*rest of your code*/
}