ayuda con JQUERY

pelusete · #1 (**permalink**) 07/07/2008, 00:54

Hola chicos, aki voy nuevamente con una pequeña duda...

tengo una pagina en la cual se "muestran" y "ocultan" informaciones segun donde se clike. En este caso dispongo de 3 titulos (t1, t2 y t3) y 3 contenidos (c1, c2, c3)

Cuando se clikea en t1, muestra/oculta c1 con TOGGLE
Cuando se clikea en t2, muestra/oculta c2 con TOGGLE
Cuando se clikea en t3, muestra/oculta c3 con TOGGLE

Aki viene mi pregunta....¿hay una funcion que pueda detectar un click en un elemento y que muestre/oculte solo el contenido de ese elemento y no el de los demas?

He buscado informacion, existe el efecto "acordeon", muy interesante, pero ello afecta a todo el grupo, kisiera que solo afectara a un solo elemento y que los demas permaneciera intacto

He intentado de diferentes maneras, pero cuando clikeo el t1, me muestra c1, c2, y c3 asike de forma de "parche" decidi hacerme 3 toggles para cada titulo...tonces estoy medio confuso...¿podrian ayudarme?

Code:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<script type="text/javascript" src="jquery-1.js"></script>


<script type="text/javascript">

// initialize the jquery code
$(document).ready(function(){

//oculta todas las infos
$("#c1, #c2, #c3").hide();

$("#t1").toggle(function(){ $("#c1").slideDown(85); },function(){ $("#c1").slideUp(85); });
$("#t2").toggle(function(){ $("#c2").slideDown(85); },function(){ $("#c2").slideUp(85); });
$("#t3").toggle(function(){ $("#c3").slideDown(85); },function(){ $("#c3").slideUp(85); });

});
</script>


<style type="text/css">

body { background: #222; text-align: center; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#contenedor { background: #000; width: 500px; height: auto; padding: 10px; margin: 0 auto 0 auto; }
.tit { background: #333; color: white; }
.con { background: #069; color: white; }

}
</style>
</head>

<body>

<div id="contenedor">

<div id=t1 class=tit>Click Info TOGGLE 1</div>
<div id=c1 class=con>
contenido 1
</div>

<div id=t2 class=tit>Click Info TOGGLE 2</div>
<div id=c2 class=con>
contenido 2
</div>

<div id=t3 class=tit>Click Info TOGGLE 3</div>
<div id=c3 class=con>
contenido 3
</div>

</div>

</body>
</html>

JavierB · #2 (**permalink**) 07/07/2008, 01:06

Movido al foro de Frameworks desde JavaScript.

Saludos,

#3 (**permalink**) 07/07/2008, 03:01

No veo el problema.

He copiado el código que pones tal cual y lo he abierto en Firefox y en IExplore. Funciona correctamente: Cuando haces click en Toggle1 se abre o cierra Contenido1, cuando haces clicke n Toggle2, se abre o cierra Contenido2, y cuando haces click en Toggle3, se abre o cierra Contenido3. Así que no acabo de entender qué es lo que no te funciona.

¿Qué es lo que quieres? Si lo que quieres es no tener que poner estas tres líneas:

Código:

$("#t1").toggle(function(){ $("#c1").slideDown(85); },function(){ $("#c1").slideUp(85); });
$("#t2").toggle(function(){ $("#c2").slideDown(85); },function(){ $("#c2").slideUp(85); });
$("#t3").toggle(function(){ $("#c3").slideDown(85); },function(){ $("#c3").slideUp(85); });

y ponerlo sólo una vez, podrías cambiar un poco las cosas:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<script type="text/javascript" src="jquery.js"></script>

<!-- jquery for this page -->
<script type="text/javascript">

// initialize the jquery code
$(document).ready(function(){
    $(".con").hide();
    $(".tit").toggle(function(){ $(this).find(".con").slideDown(85); }, function(){ $(this).find(".con").slideUp(85);});
});
</script>

<!-- css for this page -->
<style type="text/css">

body { background: #222; text-align: center; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#contenedor { background: #000; width: 500px; height: auto; padding: 10px; margin: 0 auto 0 auto; }
.tit { background: #333; color: white; }
.con { background: #069; color: white; }

}
</style>
</head>

<body>

<div id="contenedor">

<div class="tit">Click Info TOGGLE 1<div class="con">
contenido 1
</div>
</div>

<div class="tit">Click Info TOGGLE 2<div class="con">
contenido 2
</div>
</div>

<div class="tit">Click Info TOGGLE 3<div class="con">
contenido 3
</div>
</div>

</div>

</body>
</html>

pelusete · #4 (**permalink**) 07/07/2008, 09:44

Muchisimas gracias venkman, eso era justo lo ke necesitaba, optimizar el code en cierta manera con una sola funcion para cualquier determinado elemento....no sabia ke hacer, y creo que lo del .find() ayudo mucho

En todo caso, cualquier duda ke siga teniendo, no dudare en postearla

Gracias!! ^^