Как правильно добавлять класс active?

Question

[Константин Клубков]

Помогите пожалуйста! Какое условие нужно задать чтобы при клике на следующую карточку предыдущая закрывалась?

$('.law-face__item-toggle').click(function(e) {
    $(this).parent().parent().toggleClass("active"); 
    $(this).toggleClass("active");   
  });

Answer 1

[Антон Неверов]

Не используйте миллион parent(). Лучше 1 раз closest - это улучшает читаемость в тысячи раз:

$('.law-face__item-toggle').click(function(e) {
    $('.law-face__item-toggle').removeClass('active').closest('.parent').removeClass('active');
    $(this).addClass('active').closest('.parent').addClass('active');
});

Comments

[Константин Клубков]

Теперь при клике на крестик на активной карточке, она не закрывается(

[Антон Неверов]

На крестик нужен другй хендлер, который будет убирать все active классы.

[Константин Клубков]

Антон Неверов, не подскажете как?

$('.law-face__item-toggle.active').click(function(e) {
  	$(this).removeClass('active').closest('.law-face__item').removeClass('active');
});

так не получается

[Антон Неверов]

$('.law-face__item-toggle:not(.active)').click(function(e) {
    $('.law-face__item-toggle').removeClass('active').closest('.parent').removeClass('active');
    $(this).addClass('active').closest('.parent').addClass('active');
});
$('.law-face__item-toggle.active').click(function(e) {
  	$(this).removeClass('active').closest('.law-face__item').removeClass('active');
});

[Константин Клубков]

Антон Неверов, не срабатывает

[Антон Неверов]

Что именно?

[Константин Клубков]

Антон Неверов, Вот пен при клике на открытую вкладку она не закрывается

[Антон Неверов]

$('.law-face__item-toggle').click(function(e) {
  if ($(this).hasClass('active')) { //Если есть класс active - то закрываем
  	$(this).removeClass('active').closest('.law-face__item').removeClass('active');
  } else{ //Иначе открываем
    $('.law-face__item-toggle').removeClass('active').closest('.law-face__item').removeClass('active');
    $(this).addClass('active').closest('.law-face__item').addClass('active')
  }
});

Answer 2

[g0lovachlena]

Тебе нужно при клике на карточку циклом удалять класс active у всех карточек, и добавлять только той по которой кликнул