Contraer/Expandir tabla con cambio de scrollbar

[Mauri1]

Hola.

Cómo hacer lo que en ésta misma página está, son estos botones / que hacen contraer/desplegar la tabla, pero que al hacerlo, si se fijan en la barra de desplazamiento de la página, esta cambia y todo el contenido que estaba bajo la tabla que se contrajo sube, no es como otros casos en que sólo se oculta la capa y todo ese espacio queda en blanco.

Muchas gracias.

[Rober7]

Hola:

Yo también tuve el mismo problema, pero encontré un método bien fácil de hacer aparecer y desaparecer bloques, tablas, etc:

//Encierras toda la tabla en un bloque DIV:
//<a>vínculo con flecha id=nombre</a>
<div id="nombre" style="display: none;"> //indica que no se muestre
<table>
//aquí va tu tabla
</table>
</div>

//El código es:

function expander(bloque, flecha){ //flecha=flecha abajo archivo
if (bloque.style.display=="none"){bloque.style.displa y=="";flecha.src="archivo2"}
else{bloque.style.display=="none";flecha.src="arch ivo1"}
}

Si tienes dudas, puedes volver a escribir, para explicar más detalladamente el código...

[Mauri1]

Hola Rober7

Probé el código que pusiste y no me funciona, nosé si estará bien así:

Código:

<a href="javascript:expander()">Capa</a>
 
<script language="javascript">
function expander(bloque, flecha){
if (bloque.style.display=="none"){
bloque.style.display=="";
flecha.src="archivo2";
}
else{bloque.style.display=="none";
flecha.src="archivo1";
 }
}
</script>
 
<div id="nombre" style="display:none">
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>hola</td>
  </tr>
</table>
</div>

Dentro de expander nosé que poner

javascript:expander()

[Rober7]

El código que pusiste da el mismo resultado que el primero.
Dentro de la función expander hay 2 argumentos: bloque y flecha.
El argumento bloque se refiere a la sección que vas a hacer aparecer; cuando llames a la función desde el vínculo hazlo así:
<a href="direccion" onclick="expander(idbloque, idflecha)"></a>
si la seccion que está bajo el vínculo tiene un id llamado "tabla" entonces
pon:
<a href="direccion" onclick="expander(tabla, idflecha)"></a>

El arg. flecha funciona igual, solo que es la imagen que aparece cuando la sección se expanda. Queda así:
<img src="imagen inicial" id="img1"> id es el nombre que identifica a la imagen
imagen inicial es la imagen que aparece al abrir la página como sucede en este sitio

Sumando todo queda así:
<a href="direccion" onclick="expander(tabla, img1)"></a>

Si quieres un ejemplo más detallado, déjame tu e-mail para enviarte un zip con el ejemplo, incluidas las imágenes.

[Mauri1]

[email protected]

Gracias Rober7

[Rober7]

Ya te envié el archivo. Sí te resultó? Puedes adaptarlo a tus necesiadades, dentro del código te explico como funciona el ejemplo...


Saludos, Chao!

[Mauri1]

OK, voy a verlo altiro.

Muchas gracias !!