Divisiones de Expandir/Contraer simples> JQuery?

Question

Necesito agregar algunos controladores de expansión/colapso de estilo accordian a una serie de divisores de contenedor padre en mi aplicación. ¿Es esto algo demasiado simple para una biblioteca como jquery?

Ejemplo:

<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

intentar algo como esto:

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

Eso va a expandir u ocultar el contenido de los s "handleDiv" al hacer clic en ellos. Sugiero que los enlaces de cosas "expandir | colapsar" y adjuntar el controlador de clic a ellos, sin embargo, por lo que un clic en cualquier lugar en el div no alternar.

Si usted quiere que comienzan cerrado, ya sea estilo cerrados en su hoja de estilos:

.handleDiv div { 
    display: none; 
} 

o agregar un ".hide()" al final del fragmento de jQuery en el comienzo de mi respuesta .

Answer 2

Acabo de escribir un complemento para hacer eso.

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