Comment imbriquer mon objet d'en-tête dans l'accordéon jQuery

Question

J'ai une liste UL et pour des raisons de style CSS, je dois imbriquer l'objet que je souhaite utiliser comme en-tête pour mon accordéon dans un div au sein de la LI . Tel que:

<ul> 
    <li> 
     <div> 
      <h4>Header</h4> 
     </div> 
     <p>This is my content</p> 
    </li> 
    ... other lis... 
</ul> 

Maintenant, je suis vouloir brancher mon accordéon:

$(document).ready(function() { 
    $('ul').accordion({ 
     header: '' //What do I put here? 
    }); 
}); 

Quand je mets l'en-tête à h4, il ne fonctionne pas, quand j'utilise la div, il ne fonctionne que sur le bord où le rembourrage dans le div le révèle sous le h4. Existe-t-il un moyen de référencer le h4 dans le div comme en-tête? J'ai essayé 'div> h4' mais ça ne marche pas. Je suis sûr que c'est assez simple mais je n'ai pas découvert comment.

Bravo à l'avance.

Answer 1

L'accordéon fonctionne en recherchant vos sélecteurs d'en-tête, puis en appelant un .next() pour obtenir la portion de contenu. Donc pour votre balisage, il suffit d'utiliser ceci:

$('ul').accordion({ 
    header: 'li>div' //.next() will get the <p> 
}); 

J'ai testé cela, ça marche bien ici.