Открытие блоков по клику js

Question

Подскажите, как сделать открытие по клику на js. Суть в том, что у меня есть определённое кол. блоков, при нажатии на блок, должно появляться окно с его настройками. Кол. этих блоков динамическое, и выдавать разные id им не выйдет.

var block = document.getElementById('settings');

document.addEventListener('click', function(e) {
  if (e.target.id == 'trigger') {
    block.classList.remove('hide');
  }
  if (e.target.id != 'trigger') {
    block.classList.add('hide');
  }
});

*{color: #fff;}
.user {background: #000;height: 50px; margin: 10px 0;}
.settings {cursor: pointer;}
.hide {display: none;}

<div class="blocks">
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
</div>

Answer 1

const users = Array.from(document.querySelectorAll('.user'));
const triggers = users.map(item => item.querySelector('.trigger'));  // Тоже самое, что Array.from(document.querySelectorAll('.trigger'))

triggers.forEach((item, i) => { // проходимся по каждому тригеру
  item.addEventListener('click', (e) => { // ставим на него слушатель события клика
    users[i].classList.toggle('active'); // что-то делаем
  });
});

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 20px;
}

.blocks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user {
  background-color: black;
  color: white;
  padding: 10px;
  transition: margin-top 0.2s linear;
}

.user + .user {
  margin-top: 20px;
}

.user.active > * + * {
  margin-top: 10px;
}

.trigger {
  background-color: yellow;
  color: black;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  transition: border-color 0.2s linear, color 0.2s linear;
}

.trigger:hover {
  border-color: red;
  color: red;
}

.user.active .trigger {
  border-color: white !important;
  color: green !important;
}

.settings {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s linear, margin-top 0.2s linear;
}

.user.active .settings {
  max-height: 23px;
}

<div class="blocks">
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
</div>

БЛОГ НА HUSL

Открытие блоков по клику js

Ответы (1 шт):