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

Question

J'ai cette structure HTML et je veux 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 utilisant les h3 s comme des en-têtes d'accordéon, et le reste du contenu de chaque div.section que le contenu de chaque panneau d'accordéon. (Notez également: les en-têtes pourraient être n'importe quoi entre h2 et h6, selon leur nidification).

Je pensais que ce serait plus facile si l'arbre DOM ont été restructurées de sorte que les h3 s étaient à l'extérieur de chaque div puisque c'est le fonctionnement de l'accordéon par défaut:

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

Le seul problème est: comment déplacer le rubriques autour? (Je n'ai pas accès pour changer le 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.

En utilisant $.each()

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

est-il une meilleure solution que cela, bien? Peut-être juste en utilisant les options d'accordéon à la vanille?

Answer 2

Que diriez-vous ceci:

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