Символ аккордеона не изменяется при щелчке аккордеона ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой с кодом ниже, как если бы я нажимаю на аккордеон, он откроется, но символ значка «+» не будет преобразовать в «-», когда он будет открыт. Приведенный ниже фрагмент кода не активируется.
Codepen: https://codepen.io/c3isr-everything-cyb ... en/azbeoek

Код: Выделить всё

.accordion::after {
content     : '\002B';
font-size   : 18px;
color       : #116ce4;
float       : right;
margin-left : 10px;
transition  : transform 0.3s ease-in-out;
}
.accordion.active::after {
content   : '\2212';
transform : rotate(45deg);
color     : #777;
}
< /code>


const accordionEl = document.querySelector('.main')
const panelEls    = accordionEl.querySelectorAll('.panel')

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

/* code below will allow the symbol to change but it will not close other accordions if one is opened.

var acc = document.getElementsByClassName("accordion");
var i;

for (let i = 0; i < acc.length;  i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
panel.classList.toggle("open");
});
}
*/< /code>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: White;
font-family: Sakkal Majalla;
direction: rtl;
position: relative;
z-index: -2;
-ms-overflow-style: none;

}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
display: none;
}

/* Chrome */

li {
list-style: none;
}

a {
text-decoration: none;
}

.main {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
margin-top: 2rem;
margin-bottom: 1rem;
}

table {
border: 1px solid #dededf;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 1px;
text-align: center;
}

th {
border: 1px solid #dededf;
background-color: #eceff1;
color: #000000;
padding: 5px;
}

td {
border: 1px solid #dededf;
background-color: #ffffff;
color: #000000;
padding: 5px;
}

th:nth-child(1) {
width: 30.9rem;
}

th:nth-child(2) {
width: 10rem;
}

th:nth-child(3) {
width: 7rem;
}

.accordion {
background-color: #ffffff;
color: black;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
padding: 18px;
border: none;
text-align: right;
outline: none;
font-size: 20px;
transition: 0.4s;
width: 50rem;
border: 1px solid rgb(219, 219, 219);
border-radius: 8px;
box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
}

.active,
.accordion:hover {
border-color: rgb(0, 128, 255);
}

.accordion span {
float: left;
font-size: 15px;
color: #116ce4;
}

.accordion span::before {
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXVzZXJzIj48cGF0aCBkPSJNMTcgMjF2LTJhNCA0IDAgMCAwLTQtNEg1YTQgNCAwIDAgMC00IDR2MiI+PC9wYXRoPjxjaXJjbGUgY3g9IjkiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48cGF0aCBkPSJNMjMgMjF2LTJhNCA0IDAgMCAwLTMtMy44NyI+PC9wYXRoPjxwYXRoIGQ9Ik0xNiAzLjEzYTQgNCAwIDAgMSAwIDcuNzUiPjwvcGF0aD48L3N2Zz4=");
background-size: 15px 15px;
/*must match with width and height*/
display: inline-block;
width: 15px;
height: 15px;
padding-left: 10px;
vertical-align: -10%;
}

/*I addes a plus sign that will also animate when ypu click on the accordion*/
.accordion::after {
content: '\002B';
font-size: 18px;
color: #116ce4;

float: right;
margin-left: 10px;
transition: transform 0.3s ease-in-out;
}

.accordion.active::after {
content: '\2212';
transform: rotate(45deg);
color: #777;
}

.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
padding: 0px;
}

.panel.open {
max-height: 1000px;
padding: 18px;
}< /code>

 John Doe 


company
department
2025?

COMPANY A
FINANCE
✅


COMPANY Z
PMO
❌



  John Doe 


company
department
2025?

company A
HR
❌


company B
HR
❌


company C
HR
❌



 John Doe 


company
department
2025?

company A
HR
✅

Подробнее здесь: https://stackoverflow.com/questions/795 ... is-clicked