Lo primero será copiar el siguiente código antes de la etiqueta </head> en nuestro archivo HTML:
- Código: Seleccionar todo
<script>
function mostrar() {
div = document.getElementById('[b]contenido-oculta[/b]');
div.style.display = "";
}
function cerrar() {
div = document.getElementById('[b]contenido-oculta[/b]');
div.style.display='none';
}
</script>
Notarán que remarque en letra negrita contenido-oculta. Eso es el nombre de la capa que deseamos ocultar, asi que si la que ustedes quieren ocultar y mostrar se llama Capa-1, pues solo reemplazan esas dos cosas en el código.
Solo resta crear la capa y agregar la funcion para llamar a ese JS y lograr que funcione la acción.
Ah, solo funciona con capas únicas. No con capas a la que se le aplique una clase. Por lo tanto esta debe estar creada en la hoja de estilos como capa única [Anteponiendo la almohadilla # al nombre de esta]
- Código: Seleccionar todo
<a href="javascript:mostrar();">Click aquí para <b>MOSTRAR</b> el texto oculto</a>
<div id="contenido-oculta" [i]style="display:none;[/i]">
[u]Acá el contenido que queremos mostrar u ocultar[/u]
<a href="javascript:cerrar();">Click aquí para <b>CERRAR</b> la capa</a>
Si estan trabajando con Dreamweaver, Frontpage o algun otro editor HTML que tenga la opción WYSIWYG deben quitar del código lo que remarque en letra cursiva mas arriba: style="display:none; y volverlo a agregar una vez que hayan finalizado. De lo contrario no van a tener vista previa de esa capa por llevar el estilo Display:none [Capa oculta]
Mientras el código quede tal cual les muestro acá [No por ser mio, que no lo es, sino para que funcione sin problemas], pueden editar lo que dice Click aquí para...y dejarlo a gusto.
Saludos ^^
Nota: Borren los códigos
- Código: Seleccionar todo
[b] & [/b] y [i] & [/i]
Click AQUI para ver un ejemplo
