@powerg1980

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

Как при клике на "Клик" закрывать и открывать блок? получилось только открыть, а по обратному клику закрыть никак. Спасибо
  • Вопрос задан
  • 162 просмотра
Решения вопроса 2
neuotq
@neuotq
Прокрастинация
Немного упростим главный код и исправим названия класса.
Активный класс, если это БЭМ или типа БЭМ, должен быть не _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')
            )
	        }
      );
    }
  );

Обновил пример, забыл что вы хотели закрывать и другие. В любом случае действий мы выполняем меньше, чем обходя безусловно все элементы. Здесь мы обходим только те кто открыт и тот у кого айди совпадается
Рабочий пример
Ответ написан
Комментировать
@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. Сократил решение
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы