Preciso de ajuda que ao clicar em um nome abra a tela para enviar mensagens, e ao clicar em outro nome feche a janela anterior e abra a nova e assim em diante
<li><a href="javascript:void(0)" id="user" class="class_1">Fulano 01</a></li>
<li><a href="javascript:void(0)" id="user" class="class_2">Fulano 02</a></li>`
<li><a href="javascript:void(0)" id="user" class="class_3">Fulano 03</a></li>
function modal(modalID){
const modal = document.getElementById(modalID);
if (modal) {
modal.classList.add('open');
modal.addEventListener('click', (e) => {
if (e.target.id == modalID) {
modal.classList.remove('open');
}
});
console.log(modal, e.target.id);
}
}
puxo as id do banco e chamo a função pra abrir as janelas
const class_<?php echo $list['id'];?> = document.querySelector('.class_<?php echo $list['id'];?>');
class_<?php echo $list['id'];?>.addEventListener('click', () => modal('id_<?php echo $list['id'];?>'));
<div id="id_1" class="modal">1</div>
<div id="id_2" class="modal">2</div>
<div id="id_3" class="modal">3</div>
<style>
.modal {display: none;}
.modal.open {display: block;}
</style>