O kicker é o estado padrão. Você deseja que uma seção específica do acordeão seja aberta se o próprio acordeão não estiver sendo interagido.

O truque são os estados de flutuação aninhados.

A marcação

<div class="accordion">
    <section>
        <h1>Section 1</h1>
        <div class="accordion_content">
            <p>Content for section 1</p>
        </div>
    </section>
    <section>
        <h1>Section 2</h1>
        <div class="accordion_content">
            <p>Content for section 2</p>
        </div>
    </section>
    <section class="default">
        <h1>Section 3</h1>
        <div class="accordion_content">
            <p>Content for section 3</p>
            <p>This is my default state.</p>
        </div>
    </section>
    <section>
        <h1>Section 4</h1>
        <div class="accordion_content">
            <p>Content for section 4</p>
        </div>
    </section>
</div>

O CSS

Código para o estado estático (por exemplo, quando nada está sendo pairado) e sem padrão.

.accordion section > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

Em seguida, adicione o estilo de estado de foco.

.accordion section:hover > .accordion_content {
    height: 6em;
}

Agora temos um acordeão funcionando. Isso não é tão impressionante assim. Queremos um com um painel especificado aberto como padrão. Um que sempre estará aberto se o usuário não estiver passando o mouse sobre um painel diferente.

Observe que o estilo do estado de foco é o mesmo do estado padrão. Portanto, vamos adicionar esse seletor à regra.

.accordion section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

Ok, agora temos um estado padrão, mas esse nunca fecha quando estamos interagindo com os outros painéis. Precisamos de uma regra que reduza o estado padrão se passarmos o mouse sobre um painel diferente. Poderíamos tentar usar o seletor irmão geral (~), mas teremos problemas se quisermos um estado aberto padrão para qualquer painel diferente do último.

Poderíamos tentar um grande conjunto complicado de seletores e regras, mas não tenho certeza se funcionaria realmente e, de qualquer forma, vamos manter o código conciso.

A mágica

O truque é usar a natureza em cascata do CSS, bem como estados aninhados: hover.

Primeiro, queremos fechar TODOS os painéis ao passar o mouse sobre o contêiner do acordeão.

.accordion:hover > .accordion_content {
    height: 0;
}

Em seguida, queremos abrir o painel específico sobre o qual estamos pairando, lembrando que já estamos pairando sobre o contêiner do acordeão.

.accordion:hover > .accordion_content:hover {
    height: 6em;
}

Bem, isso funciona, mas temos mais linhas de código aqui do que precisamos. Vamos limpar.

Podemos combinar o seletor de foco do contêiner acordeão com nosso estilo anterior para os painéis que não são nosso padrão

.accordion section > .accordion_content,
.accordion:hover > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

Também podemos substituir a regra de funcionalidade de foco anterior pelo seletor de foco aninhado. Eles são funcionalmente equivalentes.

.accordion:hover section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

Bam! Aqui está. Um acordeão conciso, totalmente CSS, ativado por foco com um estado padrão.

.accordion:hover section:hover > .accordion_content,
.accordion section.default > .accordion_content {
    height: 6em;
}

.accordion section > .accordion_content,
.accordion:hover section > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

Tudo depois disso é estética.

Checkout da demonstração Codepen