Simple Développer/Réduire divs> JQuery?

Question

J'ai besoin d'ajouter des poignées expand/collapse de style accordéon à une série de divs conteneur parent dans mon application. Est-ce quelque chose qui est trop simple pour une bibliothèque comme jquery?

Exemple:

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

Answer 1

Essayez quelque chose comme ceci:

$('.handleDiv').click(function() { 
    $(this).children().toggle(); 
}); 

Ça va développer ou cacher le contenu des "s handleDiv" à chaque fois que vous cliquez dessus. Je suggère de faire ces liens "expand | collapse" et de leur attacher le gestionnaire de clic, pour qu'un clic n'importe où dans le div ne le fasse pas basculer.

Si vous voulez de commencer fermé, que ce soit leur style fermé dans votre feuille de style:

.handleDiv div { 
    display: none; 
} 

ou ajouter un « .hide() » à la fin de l'extrait jQuery au début de ma réponse .

Answer 2

Je viens d'écrire un plugin pour le faire.

Voir http://sylvain-hamel.github.io/simple-expand/