Bueno esto no es una duda, es un código q termine esta mañana y yo creo en q todos debemos compartir conocimientos para mejorar cada dia mas, envolvere el codigo en etiquetas php para hacerlo mas claro
El javascript...
Código PHP:
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<link href="estilo.lib.css" rel="stylesheet" type="text/css"/>
<script>
function achicar(minimo){
contenido = document.getElementById("tabla"); //capturo tabla en la variable contenido
contenido.innerHTML = ""; //borro el texto del div
altura = document.getElementById("tabla").style.height; //obtengo altura
altura = parseFloat(altura); //cambio altura a numero para manejar condicionales
if(altura > minimo){ //condicional.. si altura es mayor q minimo
altura--; //altura se reduce en 1 unidad
document.getElementById("tabla").style.height = altura; //otorgo nuevo valor de altura reducido en 1
}
if(altura > minimo){ //condicional.. si altura es mayor que minimo
Rminimo = minimo; //creo la variable rminimo para pasarla nuevamente
setTimeout("achicar(Rminimo)",1); //cada microsegundo se repetira la accion hasta q altura sea menor o igual a minimo
}
}
function agrandar(maximo,minimo){
contenido = document.getElementById("tabla"); //capturo tabla en la variable contenido
altura = document.getElementById("tabla").style.height; //obtengo altura
altura = parseFloat(altura); //cambio altura a numero para manejar condicionales
if(altura < maximo){ //condicional.. si altura es menor que maximo
altura++; //Altura aumenta en 1 unidad
document.getElementById("tabla").style.height = altura; //otorgo nuevo valor de altura aumentado en 1
AgregarTexto = altura+1; //le sumo a altura una unidad, y coloco ese valor dentro de la variable AgregarTexto
if(AgregarTexto == maximo){ //Si AgregarTexto es igual a la altura maxima, ingreso el contenido en el div
contenido.innerHTML = "Ahora puede leer este contenido<br /> es un simple javascript que cada 1 microsegundos aumenta +1 la altura de la tabla<br />Luego comprueba q la altura actual sea igual a la altura limite, en ese momento lanzo este texto<br /> ¿Simple no?<br /> jaja xD <br /><a href=\"#\" onClick=\"achicar("+minimo+");\">Esconder</a>";
}
}
if(altura < maximo){ //condicional.. si altura es menor que maximo
Rmaximo = maximo;
Rminimo = minimo;
setTimeout("agrandar(Rmaximo,Rminimo)",1); //cada microsegundo se repetira la accion hasta q altura sea mayor o igual a maximo
}
}
</script>
</head>
<body>
<table class="caja" width="400" align="center">
<tr>
<td>Caja de texto</td>
</tr>
<tr>
<td>Para ampliar el contenido haga clic <a href="#" onClick="agrandar(120,20);">aqui</a></td>
</tr>
<tr>
<td id="tabla" style="height:20px;"></div></td>
</tr>
</table>
</body>
</html>
El estilo..
Código HTML:
.caja {
BORDER-BOTTOM: #999999 10px solid;
BORDER-TOP: #999999 1px solid;
BORDER-LEFT: #999999 1px solid;
BORDER-RIGHT: #999999 1px solid;
FONT-SIZE: 11px;
BACKGROUND-COLOR : #f9f9f9;
}
onClick="agrandar(120,20);" aki mando el valor 120 es el valor hasta el q se agrandara la celda, y 20 es el valor q tenia al principio, mando ambos para hacer el efecto de agrandar y achicar
Espero que les sea util, es un buen efecto para una web, Saludos
PD: si postie en el lugar ekivokado espero me disculpen :)