Можно ли добавить в данной реализации закрытие кнопки типа (toggle)?

Question

[GekaGmeka]

Сейчас реализована логика таким образом
При клике на кнопку .more-btn (правый верхний угол блока) у меня открывается доп информация
При клике на другую кнопку .more-btn -> первая закрывается.
При клике в любую другую область у меня доп информация закрывается.

Не могу добавить реализацию закрытия доп информации по клику на эту же .more-btn (типа как toggle)
Нужна помощь по данному вопросу
https://jsfiddle.net/Gmeka/Lq2we6j8/46/

Answer 1

[0xD34F]

document.addEventListener('click', e => {
  let t = e.target;
  for (; t !== document && !t.matches('.more-btn'); t = t.parentNode) ;
  for (const n of document.getElementsByClassName('more-btn')) {
    n.classList.toggle('active', n === t && !n.classList.contains('active'));
  }

  // или

  document.querySelectorAll('.more-btn').forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove']('active');
  }, e.target.closest('.more-btn'));
});

Comments

[GekaGmeka]

Добрый день - спасибо работает так, как мне нужно
Пойду разбираться
Хорошего дня

[GekaGmeka]

подскажите плз - єто какая-то новая запись ?
n.classList.toggle('active', n === btn && !n.classList.contains('active'));

А можно как-то через условие расписать это?