Usando el acordeón jQuery con marcado extraño.

Question

Tengo esta estructura HTML y quiero convertirla en un acordeón.

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

Básicamente, utilice los h3 como encabezados de acordeón, y el resto del contenido en cada div.section como el contenido de cada panel de acordeón. (También tenga en cuenta: los encabezados podrían estar entre h2 y h6, dependiendo de su anidación).

Pensé que esto sería más fácil si el árbol DOM se reestructurara de manera que los h3 estuvieran fuera de cada div , ya que así es como funciona el acordeón por defecto:

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

El único problema es: ¿cómo mover los encabezados? (No tengo acceso para cambiar el 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, encontré la solución.

Utilizando $.each()

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

¿Hay una solución mejor que esta, sin embargo? ¿Quizás solo usando las opciones de vainilla de acordeón?

Answer 2

¿Qué tal esto?

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