Есть список состоящий из элементов с именами, при нажатии на какой-либо элемент он перемещается в заданную точку и увеличивается в размерах, а после в нём появляется информация.
Для осуществления я использую делегирование в JS, всё работает хорошо, но только с 1 элементом. У других элементов не появляется информация, потому что класс изменяется только у первого дочернего элемента с классом info.
(Класс member-active отвечает за перемещение и изменение размеров у элемента с классом member)
Как бы я не старался, я не смог сделать так, чтобы при клике на любой элемент с классом member его дочерний элемент менял класс info на info-active.
Каким образом это можно сделать? (Желательно без JQuery)
members.addEventListener('click', function(event) {
if (event.target.matches('.member')) {
event.target.classList.toggle('member-active');
info.classList.toggle('info-active');
info.classList.toggle('info');
}
});
<div class="members">
<div class="member left-member-1">
<p class="name">Имя</p>
<p class="info">Информация</p>
</div>
<div class="member left-member-2">
<p class="name">Имя</p>
<p class="info info-left-2">Информация</p>
</div>
</div>