A sua pergunta está um pouco vaga e difícil de entender o que realmente você está tentando fazer, para que possa dar uma resposta concreta e adaptar o código da melhor forma. No entanto vou postar aqui um conceito de como podes alcançar o pretendido e depois então podes fazer às alterações necessárias para as suas necessidades. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var x = document.querySelectorAll('.elemnto-link'); var resultado = document.getElementById('resultado'); // cria loop para todos os elementos com a class "elemento-link" for (var i=0; i<x.length; i++ ){ link = x[i]; // Adiciona evento click link.addEventListener('click', function(evento) { // Verifica o id do elemento clicado if (evento.target.id == 'el-um'){ // Se o id coincidir com o primeiro link "el-um", adiciona este texto no "resultado" resultado.innerHTML = '<span class="conteudo-resultado">Conteúdo do elemento UM</span>'; } else if (evento.target.id == 'el-dois') { // Se o id coincidir com o segundo link "el-dois", adiciona este texto resultado.innerHTML = '<span class="conteudo-resultado">Conteúdo do elemento DOIS</span>'; } else if (evento.target.id == 'fechar') { // Se coincidir com o elemento "fechar", elimina o texto dentro do resultado resultado.innerHTML = ''; } }); } <!-- language: lang-css --> .elemnto-link { cursor: pointer; margin-right: 30px; } .conteudo-resultado { display: block; background-color: royalblue; color: #fff; margin-top: 15px; padding: 35px; text-align: center; } <!-- language: lang-html --> <span id="el-um" class="elemnto-link">Abrir Elemento 01</span> <span id="el-dois" class="elemnto-link">Abrir Elemento 02</span> <span id="fechar" class="elemnto-link">fechar</span> <div id="resultado"></div> <!-- end snippet -->