Есть иконка внутри элемента. i с классом. Мне нужно при клике на элемент менять класс i в этом элементе. Как сделать?

Question

[Дмитрий]

Вроде бы легко, но окончательно туплю к вечеру
Хелп

var acc = document.getElementsByClassName("event-accordion-item");  // весь элемент
var fa = document.getElementsByClassName("eventAccordion-icon"); // тег i с классом внутри элемента 
var i;
 
for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

  
     
        // if (fa[0].classList.contains('fa-plus-circle')) {
        //     // fa[].classList.remove('fa-plus-circle');
        //     // fa[].classList.toggle('fa-minus-circle');
        // }
        //  if (fa[].classList.contains('fa-minus-circle')) {
        //     // fa[].classList.remove('fa-minus-circle');
        //     // fa[].classList.toggle('fa-plus-circle');
        // }
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
}

Answer 1

[MarvinJan]

Ваш код работает, но его можно слегка улучшить,

if(fas.classList.contains("fa-plus-circle")){
      fas.classList.remove("fa-plus-circle");
    }
    else{
      fas.classList.add("fa-plus-circle");
    }

вот это, раз уж вы используете toggle в коде, можно поменять на fas.classList.toggle("fa-plus-circle");

Далее,

var acc = document.getElementsByClassName("event-accordion-item");

Можно записать как

var acc = document.querySelectorAll(".event-accordion-item");

И вместо объявления i и использования for i сделать так

acc.forEach( function(acc) {
// Функционал
})

Можно сделать также и при использовании getElementsByClassName, но в таком случае нужно будет acc преобразовать в массив, при помощи Array.from( acc ) . Все потому, что getElementsByClassName возвращает HTMLcollection, у которой нет родного метода forEach, а querySelectorAll вернет NodeList, у которого метод forEach есть.

Мой вариант итогового кода

var acc = document.querySelectorAll(".event-accordion-item");
 
acc.forEach( function(acc) {

  acc.addEventListener("click", function() {

    this.classList.toggle("active");
    var fas = this.querySelector('.eventAccordion-icon');
    fas.classList.toggle("fa-plus-circle")
    fas.classList.toggle("fa-minus-circle");
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
});

Answer 2

[Дмитрий]

Сделал вот так

var acc = document.getElementsByClassName("event-accordion-item");
var i;
 
for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var fas = this.querySelector('.eventAccordion-icon');
    if(fas.classList.contains("fa-plus-circle")){
      fas.classList.remove("fa-plus-circle");
    }
    else{
      fas.classList.add("fa-plus-circle");
    }
        fas.classList.toggle("fa-minus-circle");
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
}