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 -->