Soy nuevo con el jquery, veamos que he logrado.
Esto es el html, como veras a los "hijos" los deje con esa misma clase: "hijo" y los div "padre" los cambie a botones ;) (hacer click a un div me resultaba complicado xD):
Código PHP:
<body>
<input class="padre" type="button" value="mostrar/ocultar" />
<div class="hijo">
algun texto por aca.
</div>
<input class="padre" type="button" value="mostrar/ocultar" />
<div class="hijo">
algun texto por aca.
</div>
<input class="padre" type="button" value="mostrar/ocultar" />
<div class="hijo">
algun texto por aca.
</div>
</body>
Ahora viene lo bueno, el script. Fue muy simple en realidad:
Código PHP:
<script type="text/javascript">
$(function() {
$('input.padre').click(function() {
$(this).next('.hijo').slideToggle('Slow');
});
});
</script>
Lo explico, las acciones se inician cuando el usuario clickea CUALQUIER elemento "input" que tenga una clase "padre"('input.padre'), lo que sucede luego es que se toma el elemento con clase "hijo" que sigue exactamente ( .next('hijo') ) al elemento clickeado ($(this)) y aplica el acordeon( slideToggle...)
Espero que esto te ayude. Otra cosa...al cerrar el acordeon el boton sube y se pone en la misma linea que el texto anterior(ya te daras cuenta -.-) tratare de arreglarlo.
Saludos