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: false 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="1">Y</span>
        <span class="nav-tres" tabindex="1">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 -->