Usando acordeão jQuery com marcação estranho

Question

Eu tenho essa estrutura HTML e quer convertê-lo para um acordeão.

<div class="accor">
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
</div>

Basicamente utilizando os h3s como cabeçalhos acordeão, e o resto do conteúdo em cada div.section como o conteúdo de cada painel de acordeão. (Além disso, observe: os títulos poderia ser qualquer coisa entre H2 e H6, dependendo de sua nidificação).

Eu percebi que isso seria mais fácil se a árvore DOM foram reestruturadas para que os h3s estavam fora cada div uma vez que é como funciona o acordeão por padrão:

    <h3>Sub section</h3>
    <div class="section">
        <p>Sub section text</p>
    </div>

O único problema é: como mover os títulos ao redor? (Eu não tenho acesso para alterar o código HTML).

var $sections = $("div.accor > .section"),
    $headings = $sections.find("> :header")
;
// I figured that inserting each heading to be before its parent might
// be the answer:
$headings.insertBefore($headings.find(":parent"));

// ... but that doesn't do anything

Answer 1

Ah, eu encontrei a solução.

Usando $.each()

$headings.each(function(i, el) {
    var $this = $(el), $p = $this.parent();
    $this.insertBefore($p);
});

Existe uma solução melhor do que este, embora? Talvez apenas usando as opções de Acordeão de baunilha?

Answer 2

Como sobre isto:

$('.accor .section').each(function() {
    $('h3', this).insertBefore($(this));
});