Использование аккордеона jQuery со странной разметкой

У меня есть эта HTML-структура, и я хочу преобразовать ее в гармошку.

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

Обычно используются h3 в качестве заголовков аккордеона, а остальной контент в каждом div.section - в качестве контента для каждой панели аккордеона. (Также обратите внимание: заголовки могут быть любыми между h2 и h6, в зависимости от их вложенности).

Я подумал, что это было бы проще всего, если бы дерево DOM было реструктурировано так, чтобы h3 находились за пределами каждого div, так как аккордеон работает по умолчанию:

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

Единственная проблема: как перемещать заголовки? (У меня нет доступа для изменения 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