Как сделать так, чтобы popup при повторном клике закрывался?

Question

[Mikhail Rerberg]

Всем привет!

Проблема: как сделать так, чтобы показывался всегда 1 popup, а при повторном клике элемент скрывался?

Код:
https://codepen.io/anon/pen/LqPmGw

Answer 1

[Владимир Проскурин]

У вас есть toggle, но ей мешает то, что вы скрываете текущий кликнутый блок в closeAllPopups.
Вот так правильно https://codepen.io/anon/pen/Rvbyzg

Comments

[Mikhail Rerberg]

Спасибо!

Answer 2

[0xD34F]

- .popup.visible {
+ .item.visible .popup {

const container = document.querySelector('.container');
const itemSelector = '.item';
const activeClass = 'visible';
const toggleItem = (item, items) =>
  items.forEach(n => n.classList[n === item ? 'toggle' : 'remove'](activeClass));


// делегирование, назначаем обработчик клика один раз для всех item'ов
container.addEventListener('click', function({ target: t }) {
  if (t.matches(itemSelector)) {
    toggleItem(t, this.querySelectorAll(itemSelector));
  }
});

// или, каждому item'у назначаем обработчик клика индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  if (this === t) {
    toggleItem(t, items);
  }
}

Comments

[Mikhail Rerberg]

Спасибо!

Answer 3

[Rsa97]

if(target.matches('.item')) {
  if (!target.children[0].classList.contains('visible')) {
    closeAllPopups();
  } 
  target.children[0].classList.toggle('visible');
}

Comments

[Mikhail Rerberg]

Спасибо!