Mostrar y Ocultar DIVs con JavaScript

Buenas!

Aqui un pequeño tutorial para darle un poco de efectos dinamicos a nuestro sitio web o Blog.

En Codigo Geek podran ver un claro ejemplo de lo que se puede lograr con este simple tutorial y obvio dandole un lindo estilo y diseño.

Y Aqui nuestro Ejemplo, tengan en cuenta que solo es para mostrar el funcionamiento de JavaScript despues ustedes pueden darle el estilo que quieran!

Bueno comencemos con el Codigo, primero crearemos nuestro Codigo HTML:

index.html

        Mostrar y Ocultar DIVs con Javascript - www.matydesign.com
Mostrar y Ocultar DIVs con Javascript

Capa 1
Capa 2
Capa 3


            Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
             Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
              Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
               Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
        

            * Enlace
            * Enlace
            * Enlace
        

            Texto 3 Texto 3  Texto 3  Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
             Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
              Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
               Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
        

Bueno como ven muy sencillo, primero creamos una Lista la que actuara para mostrar los DIVs. Despues creamos 3 DIVs con el contenido que queramos, tengan en cuenta que son DIVs comunes y pueden agregar lo que se les antoje .

Nota: Es muy importante que los DIVs tengan cada uno un ID unico.

Ahora le daremos un poco de estilo:

estilo.css

li {
    color:#fff;
    display:block;
    width:100px;
    padding:5px;
    background:#999;
    font-weight:bold;
}
li:hover {
    color:#000;
}
.capa1 {
    background:#999;
    display:none;
}
.capa2 {
    background:#333;
    color:#fff;
    display:none;
}
.capa3 {
    background:#000;
    color:green;
    display:none;
}

Ya que tenemos todos los DIVs y todo el diseño ya creado, vamos a crear las funciones en JavaScript para que podamos mostrar y ocultar los DIVs.

function capa1(){
                document.getElementById('capa1').style.display = 'block';
                document.getElementById('capa2').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
}
function capa2(){
                document.getElementById('capa2').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
}
function capa3(){
                document.getElementById('capa3').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa2').style.display = 'none';
}

Esto es muy sencillo creamos 3 funciones, una para cada DIV, cada funcion muestra el DIV y oculta los demas (si alguno estuviera visible). Pasamos a explicar como funciona, la funcion getElementById(‘id_del_div’) retorna el elemento con la ID que le especifiquemos, asi que dentro de los parentesis tenemos que ingresar el ID de uno de nuestros DIVs, y la parte de: .style.display le estamos asignando nuevos valores al estilo del DIV que seleccinamos. Con none ocultaremos el div y con block lo mostrara.

Ahora lo unico que nos queda por hacer es que cuando se haga clic sobre cada enlace (o en nuestro caso, en cada item de la lista) que este muestre el DIV correspondiente. Para esto le pasaremos la funcion a cada item de la Lista de esta manera:

Capa 1
Capa 2
Capa 3

Asi de sencillo. Ya tenemos nuestro ejemplo terminado, asi que les dejo el codigo completo acontinuacion:

        Mostrar y Ocultar DIVs con Javascript - www.matydesign.com

            function capa1(){
                document.getElementById('capa1').style.display = 'block';
                document.getElementById('capa2').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa2(){
                document.getElementById('capa2').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa3(){
                document.getElementById('capa3').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa2').style.display = 'none';
            }
Mostrar y Ocultar DIVs con Javascript

Capa 1
Capa 2
Capa 3


            Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
             Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
              Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
               Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
        

            * Enlace
            * Enlace
            * Enlace
        

            Texto 3 Texto 3  Texto 3  Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
             Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
              Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
               Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
        

Espero que les halla gustado y que puedan implementarlo en su Blog o Web ya que puede darle mucho estilo, ademas de poder utilizar este metodo para ahorrar espacio, entre otras cosas.

Ejemplo: Demo!

Saludos…
Maty!