Utilisation de l'accordéon jQuery avec un balisage étrange

Question

J'ai cette structure HTML et je souhaite la convertir en accordéon.

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

Fondamentalement, utilisez les éléments h3 comme en-tête d'accordéon et le reste du contenu de chaque div.section en tant que contenu de chaque panneau accordéon. (Remarque: les en-têtes peuvent être compris entre h2 et h6, en fonction de leur imbrication).

Je pensais que ce serait plus facile si l'arborescence DOM était restructurée afin que les h3 soient en dehors de chaque div car c'est ainsi que l'accordéon fonctionne par défaut:

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

Le seul problème est le suivant: comment déplacer les titres? (Je n'ai pas accès à la modification du code 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, j'ai trouvé la solution.

Utilisation de $. each ()

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

Existe-t-il une meilleure solution? Peut-être juste en utilisant les options Accordéon vanille?

Answer 2

Que diriez-vous de cela:

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