Ayuda acordeon con JQuery.

a77icu5 · #1 (**permalink**) 13/02/2009, 20:30

Hola gurus del foro XD, les comento...

De manera dinamica genero una estructura del tipo

<div class="padre">
<div class="hijo">
algun texto por aca.
</div>
</div>
<div class="padre">
<div class="hijo">
algun texto por aca.
</div>
</div>
<div class="padre">
<div class="hijo">
algun texto por aca.
</div>
</div>
....

Y segun mi codigo de Jquery para hacer un acordeon es:

$(".padre").click(function()
{
$(".hijo").slideToggle("Slow");
}
);

El problema es que cuando hago clic en el padre, se expanden/contraen todos los hijos, lo cual tiene logica segun mi codigo, pero yo quiero hacer que se contraiga/expanda el hijo dependiendo el padre donde le di clic. Me plantie la segunda posibilidad

<div class="padre1">
<div class="hijo1">
algun texto por aca.
</div>
</div>
<div class="padre2">
<div class="hijo2">
algun texto por aca.
</div>
</div>
<div class="padre3">
<div class="hijo3">
algun texto por aca.
</div>
</div>

Segun yo asi seria un poco mas "facil" pero ahora el problema es que no se como quedaria mi codigo de Jquery, alguien me puede ayudar

, se los agradeceria mucho, mi idea es que el acordeon quedara como el que tiene en los comentarios este blog ***webdesignerwall.com/tutorials/dache-logo-design-process ***, espero puedan ayudarme, en serio gracias.

#2 (**permalink**) 22/02/2009, 23:16

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

jam1138 · #3 (**permalink**) 24/02/2009, 12:57

Cita:

Iniciado por a77icu5

El problema es que cuando hago clic en el padre, se expanden/contraen todos los hijos, lo cual tiene logica segun mi codigo, pero yo quiero hacer que se contraiga/expanda el hijo dependiendo el padre donde le di clic.

Dentro de la función tienes el objeto 'this' (que hace referencia al selector en cuestión) y de ahí puedes acceder a los elementos que contiene con el método children().

Con tu código original, algo como esto te debería de servir:

Código javascript:

Ver original$('.padre').click(function() {
    $(this).children().slideToggle("slow");
});

Un saludo