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

Question

У меня есть эта структура 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 s в качестве заголовков аккордеона, а остальное содержимое в каждом 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

Answer 1

Ах, я нашел решение.

Использование $.each()

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

Есть ли лучшее решение, чем это, хотя? Может быть, просто используя ванильные варианты Аккордеона?

Answer 2

Как насчет этого:

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