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: true 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 --> ---------- ## >_Edição Para fazer um **menu de tabs** como o do Stack Overflow, até podes fazê-lo apenas com CSS da seguinte maneira: <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-css --> body { margin: 0; padding: 0; background-color: #fff; } .navegacao { background-color: #fff; border-bottom: 1px solid #eee; } .navegacao span { display: inline-block; padding: 16px; outline: 0; cursor: pointer; } .navegacao span:hover, .navegacao span:active, .navegacao span:focus { background-color: #eee; } .nav-um:focus ~ .conteudo .conteudo-um, .nav-um:active ~ .conteudo .conteudo-um { display: block; } .nav-dois:focus ~ .conteudo .conteudo-dois, .nav-dois:active ~ .conteudo .conteudo-dois { display: block; } .nav-tres:focus ~ .conteudo .conteudo-tres, .nav-tres:active ~ .conteudo .conteudo-tres { display: block; } .conteudo { position: absolute; top: 50px; } .same { display:none; background-color: #eee; padding: 10px; } <!-- language: lang-html --> <div class="navegacao"> <span class="nav-um" tabindex="1">X</span> <span class="nav-dois" tabindex="2">Y</span> <span class="nav-tres" tabindex="3">Z</span> <div class="conteudo"> <div class="conteudo-um same">Conteúdo do elemento UM</div> <div class="conteudo-dois same">Conteúdo do elemento DOIS</div> <div class="conteudo-tres same">Conteúdo do elemento TRÊS</div> </div> </div> <!-- end snippet --> ---------- ##Conteúdo desaparece quando o mesmo é clicado Para resolver esse problema poderíamos apenas adicionar também um `tabindex=""` aos `conteúdos` e agregar um focus ao conjunto responsabilizado por mostrar o conteúdo: .nav-um:focus ~ .conteudo .conteudo-um, .nav-um:active ~ .conteudo .conteudo-um, .conteudo-um:focus, .conteudo-um:active /* Novo focus para o conteúdo */ { display: block; } Isto resultava, mas também iria resultar em um novo problema, que é perder o focus da tab com título que não temos como manipular isso para ele se manter `ativo` ou seja, com aquela cor de background cinzenta quando o conteúdo é clicado, então aqui teremos de recorrer a um pouco de Javascript, neste caso jQuery da seguinte forma: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(document).ready(function() { $('.navegacao span').on('click', function () { if ($(this).hasClass('tab-ativada')) { $('.navegacao span').removeClass('tab-ativada'); $('.same').focus(); } else { $('.navegacao span').removeClass('tab-ativada'); $(this).addClass('tab-ativada'); } }); $(document).on('click', function(e) { if (!$(e.target).is('.navegacao span, .same')) { $('.navegacao span').removeClass('tab-ativada'); } }); }); <!-- language: lang-css --> body { margin: 0; padding: 0; background-color: #fff; } .navegacao { background-color: #fff; border-bottom: 1px solid #eee; } .navegacao span { display: inline-block; padding: 16px; outline: 0; cursor: pointer; } .tab-ativada, .navegacao span:hover { background-color: #eee; } /* Isto poderia ser dividido em três blocos de código como estava anteriormente, mas já que o estilo a ser aplicado é igual para todos decidi juntar tudo num só bloco. Adapta-o à tua maneira */ /* Primeira Tab */ .nav-um:focus ~ .conteudo .conteudo-um, .nav-um:active ~ .conteudo .conteudo-um, .conteudo-um:focus, .conteudo-um:active, /* Segunda Tab */ .nav-dois:focus ~ .conteudo .conteudo-dois, .nav-dois:active ~ .conteudo .conteudo-dois, .conteudo-dois:focus, .conteudo-dois:active, /* Terceira Tabe */ .nav-tres:focus ~ .conteudo .conteudo-tres, .nav-tres:active ~ .conteudo .conteudo-tres, .conteudo-tres:focus, .conteudo-tres:active { display: block; } .conteudo { position: absolute; top: 50px; } .same { display:none; background-color: #eee; padding: 10px; outline: none; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div class="navegacao"> <span class="nav-um" tabindex="1">X</span> <span class="nav-dois" tabindex="2">Y</span> <span class="nav-tres" tabindex="3">Z</span> <div class="conteudo"> <div class="conteudo-um same" tabindex="1">Conteúdo do elemento UM</div> <div class="conteudo-dois same" tabindex="2">Conteúdo do elemento DOIS</div> <div class="conteudo-tres same" tabindex="3">Conteúdo do elemento TRÊS</div> </div> </div> <!-- end snippet -->