'; winimg.document.writeln(doc); winimg.document.close(); } //]]>

Mostrando y ocultando Div usando CCS y Javascript

Author: Sergio Mejias Sánchez

Esta solución tiene un resultado espectacular porque no tienes que enviar al usuario un popup o una página aparte para mostrar una información. Al hacer un click se mostrará la parte del código que haya en el Div como si saliera de la nada.

Lo primero, aquí está la función:

PLAIN TEXT
JavaScript:
  1. function toggleLayer(whichLayer)
  2. {
  3. if (document.getElementById)
  4. {
  5. // this is the way the standards work
  6. var style2 = document.getElementById(whichLayer).style;
  7. style2.display = style2.display? “”:“block”;
  8. }
  9. else if (document.all)
  10. {
  11. // this is the way old msie versions work
  12. var style2 = document.all[whichLayer].style;
  13. style2.display = style2.display? “”:“block”;
  14. }
  15. else if (document.layers)
  16. {
  17. // this is the way nn4 works
  18. var style2 = document.layers[whichLayer].style;
  19. style2.display = style2.display? “”:“block”;
  20. }
  21. }


Como puedes ver, esta función debería trabajar en todos los navegadores incluyendo versiones antiguas de Internet Explorer y Netscape. Lo siguiente que necesitas es crear el div que se mostrará y ocultará utilizando para ello un poco de CSS. A continuación está el CCS y el tag div usando en el ejemplo:

PLAIN TEXT
HTML:
  1. div#commentForm
  2. {
  3. margin: 0px 20px 0px 20px;
  4. display: none;
  5. }
  6. <div id=“commentForm”>
  7. Aquí pongo el contenido que quiero mostrar y ocultar
  8. </div>

Fijate que necesitas dar al div como ID el nombre del estilo puesto en el CSS porque es como el javascript sabe que div ha de ocultar y mostrar cambiando para ello el valor “display: none;” to “display: block;” cada vez que se pulse sobre el elemento que querramos, tal y como muestro a continuación:

PLAIN TEXT
HTML:
  1. <a href=“javascript:toggleLayer(’commentForm’);” title=“Add a comment to this entry”>
  2. Add a comment
  3. </a>
  4. <input type=“reset” name=“reset” value=“Cancel”
  5. onclick=“javascript:toggleLayer(’commentForm’);” />

Fuente netlobo.com

3 Comments so far

  1. vico on Noviembre 20th, 2006

    Ok, buena idea esta sección de trucos, pero sería ideal complementarla con un link de “ver el ejemplo en funcionamiento” o algo similar.

  2. Vico on Noviembre 20th, 2006

    Guay, pero sería ideal ver un enlace del ejemplo en funcionamiento.

    Otra cosa, le he dado al link del título de la sección y me ha ido a la misma pantalla pero ha maquetado mal.
    Que lo sepas

  3. Banik on Julio 18th, 2007

    Hello Admin! Nice Site. Have a look on this one.

Leave a reply

Levitra alternatives I hope you know that generic buy viagra.
Get viagra buy viagra no script. Viagra Video on the Web amazing effect mail order viagra online buy viagra 100mg.