Mostrar u ocultar objetos Div, con Javascript y DOM

Existe un metodo para mostrar u ocultar elementos Div, es decir ocultar el elemento y todo lo que este dentro de él.

Inicialmente oculto

Estos botones niciarán en la página con el contenido no visible para el visitante, así el visitante podrá decidir si quiere mirar el contenido del botón o lo que oculta, xD.
CSS.- Botón con CSS:


Para que se entienda un poco mejor y mucho más práctico aqui esta un ejemplo visual:

Aqui estará la parte que se ocultará y puede contener lo que quieras, como Imágenes, Videos, incluso otro boton como este:

Todo lo que te puedas imaginar

Código:

<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>

Tradicional.- Botón sin CSS:


Si, bastante interesante el efecto, pero tambien puedes colocar en vez de que se vea con fondo color azul, puede ser un botón tradicional:

Que tal de la manera tradicional

<div><input value="Ver más" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Que tal de la manera tradicional</div></div>

Inicialmente visible

Los anteriores ofrecian la funcionalidad de mostrar solamente el botón y presionarlo para ver el contenido, pero si lo prefieres se podría conseguir el efecto contrario, es decir, mostrar el contenido y ocultarlo dependerá totalmente del visitante de tu página:

Tradicional.- Botón sin CSS:

Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.

El código es el siguiente:

<div><input value="Ocultar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div>Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.</div></div>

Modificación del botón con CSS

El código se puede insertar en cualquier parte de nuestro web/blog, ya sea en entradas o en gadgets, así como en la propia plantilla. Tambien puedes personalizarlo en cuanto a los colores y bordes, así como el tipo de letra:

<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>

color:white; /* Aquí se cambia por el color en Hexadecimal o RGB, y este será el color de la letra */
background:#CCCCFF; /* Aqui se puede colocar una imágen de fondo y el color de fondo */
border:1px ridge #FFFFFF; /* Aquí se modifica respecto a los bordes en CSS*/
margin-left: 50px; /* Aquí se especifíca el espacio exterior a la izquierda */
padding: 0px; /* Aquí se especifica el espacio interior */
width: 80px; /* Aquí se especifica el ancho del botón*/
font-size: 14px; /* Aquí se especifica el tamaño de la letra */
font-family: trebuchet ms; /* Aquí se especifca el tipo de la letra */

O puedes utilizar el mismo efecto, pero en un enlace:

Ver más

Todo lo que te puedas imaginar

<div><a href='#' style="margin-left: 50px;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Ver más';}return false" type="button">Ver más</a><div style="display: none;">Todo lo que te puedas imaginar</div></div>