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>