Me puse a hacerlo y por suerte me salio bien jejeje...yo lo tenia como me muestras en el ejemplo, pero yo no lo queria asi, pongo el ejemplo que hice para que lo vean y si le sirve que lo aprovechen, lo unico que le falta es un poco de CSS.
Yo que queria que inicialmente saliera cerrada la pestanna y cuando diera el click sobre ella se desplegara hacia arriba y no hacia abajo que es como normalmente sale el efecto, ahora la que hice hace lo que deseaba.
Saludos, kceres
Código HTML:
<html>
<head>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#bbb').css('height','0px');
$('#aaa').click(function(){
$('#bbb').css('z-index','1000');
$('#aaa').css('z-index','1001');
if($('#bbb').css('height')!=0+'px'){
$('#bbb').animate({width:100, height:0, top:305, left:9}, "fast");
$('#aaa').animate({width:100, height:20, top:285, left:9}, "fast");
}else{
$('#bbb').animate({width:100, height:120, top:185, left:9}, "fast");
$('#aaa').animate({width:100, height:20, top:165, left:9}, "fast");
}
})
})
</script>
</head>
<body>
<div style="width:300px; height:298px; border: solid 1px #000000;">
<div id="aaa" style="width:100px; height:20px; background-color:#CCCCCC; text-align:center; position: absolute; top: 285px;">
<a>Pistas</a>
</div>
<div id="bbb" style="width:100px; height:120px; background-color:#0099CC; position: absolute; top: 305px;">
</div>
<div style="height:2px; width:150px; background-color:#000000; position: absolute; top: 305px;"></div>
</div>
</body>
</html>