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>
<!-- jquery for this page -->
<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>
<!-- 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 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>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<script type="text/javascript" src="jquery-1.js"></script>
<!-- jquery for this page -->
<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>
<!-- 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 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>
Mode Lineal
