Как при клике убрать активный класс?

Question

[powerg1980]

Как при клике на "Клик" закрывать и открывать блок? получилось только открыть, а по обратному клику закрыть никак. Спасибо

Answer 1

[Александр Талалаев]

Немного упростим главный код и исправим названия класса.
Активный класс, если это БЭМ или типа БЭМ, должен быть не _active, а fits-cars-showmore-content_active, ну и с остальными соответственно.
Так же разделим название для data атрибутов, чтобы у кнопок и контента они различались, так желательно в данной семантике. Либо в дата атрибут передавать айди кого будем дёргать. Тут уже на усмотрение разработчика в зависимости от дельнейшего пути
Сам цикл упростим (но желательно конечно вернуть/добавить проверки аргументов, существования элементов и тп, я убрал для наглядности.).

const autoBtns = document.querySelectorAll('.block-tabs-main-home__item');
	autoBtns.forEach(
    btn => {
      btn.addEventListener("click", (e) => {			
        const contentId = btn.getAttribute("data-content-id");     
        document
            .querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`)
            .forEach( (el) =>
              el.classList.toggle('fits-cars-showmore-content_active')
            )
	        }
      );
    }
  );

Обновил пример, забыл что вы хотели закрывать и другие. В любом случае действий мы выполняем меньше, чем обходя безусловно все элементы. Здесь мы обходим только те кто открыт и тот у кого айди совпадается
Рабочий пример

Answer 2

[LJ322]

У вас все элементы по клику на кнопку закрываются, а потом срабатывает toggle на выбранном, поэтому он не закрывается. Самый простой вариант - toggle для совпадающих id, а remove для остальных

autoContents.forEach(content => {
				let attr = btn.getAttribute("data-id");
				if (content.getAttribute("data-id") == attr) {
					btn.classList.toggle('_active')
					content.classList.toggle("_active");
				} else {
          content.classList.remove("_active");
        }
			});

upd. Сократил решение

Comments

[Александр Талалаев]

Всё равно не очень хорошо обходить все. Одно дело события на кнопки развесить, но зачем по всем с контентом обходить? Я предложил чуть более эффективный подход, обход только активных.