Expandir area de contenido en JavaScript.

Haggen · #1 (**permalink**) 27/02/2007, 23:31

Hola.. he visto este efecto en varios sitios y quisiera implementarlo en pagina.

Lo que hace es expandir hacia abajo un area de contenido que esta escondida, al dar click en un link esta area aparece expandiendose.

Aqui hay un ejemplo: http://myanimelist.net/?user=Haggen

Busquen el link de "Elfen Lied More" y denle al More :P

Alguien sabe donde puedo conseguir algun codigo que me pueda servir?? cabe señalar que mi pagina es dinamica y esta en php.. tratare de implementarlo.

Se agradece la ayuda.

JavierB · #2 (**permalink**) 28/02/2007, 02:08

Hola Haggen

Prueba este ejemplo:

Código PHP:

  <html>
<head>
<style type="text/css">
div {border:1px solid black}
#algo {height:0; overflow: hidden; display:none}
</style>
<script type="text/javascript">
var h=0;
var pepe;
function expandir(ide) {
  obj=document.getElementById(ide);
  obj.style.display='block'
  for (i=0; i<50; i++)
  capa=ide;
  pepe=setInterval('agranda(capa)',10);
}
function agranda(obj) {
  obj=document.getElementById(obj);
  h++;
  if (h>50) clearInterval(pepe);
  obj.style.height = h+'px';
}
</script>
</head>
<body>
<div><a href="#" onclick="expandir('algo'); return false">Ver</a></div>
<div id="algo">
Nombre: Pepe<br>
Apellido: Potamo;
</div>
</body>
</html>

Saludos,

Haggen · #3 (**permalink**) 28/02/2007, 19:47

Muy bueno!!! :D

Se acerca muuuucho a lo que necesito.. Solo un par de cosas..

1. Como hago para que al darle click vuelva a cerrar el div?
2. El contenido en cada div expandible puede ser mas corto o mas largo, al parecer el script maneja una altura fija, no se podria hacer que el div se ajuste al tamaño del contenido que tenga??
3. Lo eche a andar con dos o mas contenidos.. el asunto es que le das click al primero y se ve bien, apartir de ese, los demas no tienen ese desplazamiento que tiene el primero.

Tambien me fije que una ves abierto el div, y le sigues dando click al link, este se va abriendo pokito a pokito...

En verdad agredezco tu ayuda..

Aqui esta mi codigo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
var h=0;
var pepe;
function expandir(ide) {
  obj=document.getElementById(ide);
  obj.style.display='block'
  for (i=0; i<50; i++)
  capa=ide;
  pepe=setInterval('agranda(capa)',10);
}
function agranda(obj) {
  obj=document.getElementById(obj);
  h++;
  if (h>50) clearInterval(pepe);
  obj.style.height = h+'px';
}
</script>
</head>
<body>
<div><a href="#" onclick="expandir('item1'); return false">Ver</a></div>
<div id="item1" style="overflow: hidden; display:none; border:1px solid black">
<table width="200" border="0" cellpadding="4" cellspacing="1" bgcolor="#000000" align="center">
  <tr bgcolor="#FF0000">
    <td colspan="2"><span ><font color="#FFFFFF">Texto</font></span></td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td width="62"> Dato </td>
    <td width="138">Dato</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>Dato</td>
    <td>Dato</td>
  </tr>
</table>
</div>
<br>
<div><a href="#" onclick="expandir('item2'); return false">Ver</a></div>
<div id="item2" style="overflow: hidden; display:none; border:1px solid black">
<table width="200" border="0" cellpadding="4" cellspacing="1" bgcolor="#000000" align="center">
  <tr bgcolor="#FF0000">
    <td colspan="2"><span ><font color="#FFFFFF">Texto2</font></span></td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td width="62"> Dato2 </td>
    <td width="138">Dato2</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>Dato2</td>
    <td>Dato2</td>
  </tr>
</table>
</div>
</body>
</html>

Gracias!