Hacker of the Web
Tus ideas en código!...y mas

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>
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

37 comentarios !

Rulcaslez dijo...

q onda oye no sabes como mostrar objetos y esconderlos asi, pero que no este en boton, que sea en un link o enlace.porfasssss.
saludos y arriba las poderosisimas chivas

SäNTÿ dijo...

Rulcaslez, :D tienes razón olvidé explicar como hacerlo con un enlace, pero ahorita lo corrijo.

Gracias xD

Abre Paréntesis dijo...

Ola santi, primero felicitarte por tu blog el cual seguro me ayudará bastante. A ver si pudieras pasarme el codigo para poner el traductor que tu tienes para traducir la pagina a otros idiomas, y ponerlo como wiget en mi sidebar. muchas gracias de antemano.

SäNTÿ dijo...

Hola Abre Paréntesis!!,

se agradece la felicitación, aqui están los pasos para: agregar el traductor

Abre Paréntesis dijo...

Por cierto santi, muchas gracias por el traductor, oye una pregunta, te importaria que hablasemos por messenger?? es que tengo unos problemas con mi web, y como se ve que entiendes bien el codigo, me encantaria que pudieses ayudarme que seguro que para ti es pan comido, es que me gustaria poner la pagina como la tienes tu, es decir, la columna lateral que nunca se termine, y abajo añadir un sidebar y tal para darle un buen formato de pagina, si no te importa contestame y me dices si me kieres agregar o algo por favor necesito ayuda rapidamente. gracias de antemano.

SäNTÿ dijo...

Abre Paréntesis, pero por supuesto!! xD. Agregame: hackeroftheweb.staff@gmail.com

Abre Paréntesis dijo...

santi que pasa que no te conectas... a ver si hablamos, si te conectas hoy avisa nos vemos bro

BrujaBlack dijo...

Muchisimas Gracias, tu codigo me fue muy util ;) aun estoy construyendo mi blog y necesitaba algo similar para ocultar la caja de texto que contiene el link de mi banner.

Rulcaslez dijo...

que onda, oye no sabes como mostrar contenido asi, pero por medio de pestañas, osea que cada pestaña muestre su contenido.
De antemano thks chido el blog.
Arriba las poderosisimas chivas.....

Jade Dynasty en Español dijo...

Hola man te explico mi problema. Como puedo agregar un link o un objeto q solo lo vean mis amigos con alguna clave (esa clave q pueda ser cambiada por mi) SE PUEDE EN BLOGSPOT?

Jade Dynasty en Español dijo...

Ese boton esta bueno pero lo que yo quiero es q mis amigos a la hora que le den clic a ese boton le salga una casilla para q introduscan una clave y puedan ver los objetos ocultos :D

SäNTÿ dijo...

Jade Dynasty en Español, creo que si se puede, déjame encuentro donde estaba ese código. De ante mano te digo que es javascript. Pronto lo postearé.

Super Blog dijo...

Buenas Santy, esta fino tu blog una pregunta puedes pasarme el truco o bien el enlace al post , para el truco de tener una lista de entradas en una etiqueta, dejame explicarme, por ejemplo en tu etiqueta de blogger al darle sale un menu de entradas y uno puede observar el titulo de lo que busca y abrirlo, como puedo hacer eso, es que estoy empezando en esto de los blogs y me parece util, gracias de antemano, y felices fiestas.

SäNTÿ dijo...

Super Blog, pues la lista de etiquetas es normal, pero lo de mostrar solo los títulos es posible gracias a un hack: http://santyweb.blogspot.com/2009/03/entradas-expandibles-en-el-blog.html

En el punto tres vienen las opciones interesantes ;)

Suerte!!

●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola santy quiero felicitarte por este código es acojonante. En muchas páginas han tratado de explicar este asunto bastante mal, entre las éstas se encuantran el escaparate de rosa, vagabundia y muchas otras. A mi parecer lo de editar la plantillas es un rollo de cagarse, tu código es sencillo, efectivo y muy limpio, me ha encantado, bravo!

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, gracias por el comentario xD!! no sabes que gusto me da que te pudiera servir el código ;)

Super Blog dijo...

Gracias pana eso era lo que estaba buscando, le di un vistazo nada mas luego lo aplico pero era lo que buscaba, gracias de nuevo, ya se que luego puedo preguntarte otras cosas, a y despues te paso el link de mi blog lo que pasa es que esta en construcción.

Super Blog dijo...

epa Santy, una duda, como pono la opcion de agrandar o reducir el tamaño de la letra al lado del titulo de la entrada asi como lo tienes tu, ah y en todas las entradas?? gracias de antemano.

SäNTÿ dijo...

Super Blog, seguro ;) esa opción esta explicada aqui: http://santyweb.blogspot.com/2009/03/aumentar-y-reducir-el-tamano-del-texto.html y para ponerlo en el titulo de las entradas puedes agregar el código del paso [3] dentro de la siguiente etiqueta:

<h3 class='post-title entry-title'>

suerte con ello xD!!

Super Blog dijo...

epa Santy mejor hablamos por correo si va? este es el mio manuelgomez_2311@hotmail.com, porque tuve un problema con lo de aumentar o disminuir el tamaño de letra. pero gracias por el truco.

TkanimeAdm dijo...

Hola amigo es la primera vez que visito tu pagina y me gusto mucho.....bueno tengo una gran duda es pero que me puedas ayudar mira actualmente uso un código para mostrar texto (muy parecido al tullo) pero mi gran duda es si se podría hacer que el texto aparezca en una lugar especifico (no de bajo de donde dice ver mas)es que me gustaría que apareciera en la parte superior de la entrada......espero puedas ayudarme ;)

SäNTÿ dijo...

TkanimeAdm, tienes razón no he publicado algo por el estilo. Tenme un poco de pasciencia en lo que publico acerca de ello ;)

Gracias por la visita, y otras mil mas por comentar xD!!

UrielGT-X dijo...

Buen truco Santy!
Como siempre uno con dudas....
Es posible hacerlo alrevez?.. Osea, mostrar el contenido y al darle clic al boton, se oculte. Es posible eso?
Bueno espero y me ayudes... Gracias!

SäNTÿ dijo...

UrielGT-X, gracias por tu comentario. claro que es posible, xD.

En el post encontrarás tu respuesta xD!

nos vemos!

Anónimo dijo...

Gran post. No se puede esperar a leer los siguientes:)

Xx-Fernando-xX dijo...

gracias, lo eh estaso buscando mucho me agrado. buen blog :)

Ana Maria dijo...

Hola.
Me parece excelente y me ha funcionado muy bien en IE y chrome. Pero en Mozilla no. Cuál puede ser la razón?
Gracias

Anónimo dijo...

We hebben een beetje moeite om de RSS abonneren, in ieder geval heb ik boeken gemarkeerd met deze geweldige site, is heel nuttig, plus gevuld met informatie.

SäNTÿ dijo...

Anónimo

Bedankt voor het commentaar!

oscar dijo...

hola soy un seguidor tuyo, es de tiempo que estiy retomando la elaboración de paginas tal ves no me recuerdes soy de peru, quiero decirte que tengo un problemilla: tengo un blog personalizado: www.colegioadven.tk ; el problema es este: se ve el cuadro de facebook pero en ingles(no todo)algunas partes como veras, si fueras muy amable en poder ayudarme en esta ocación otra vez, de ante mano gracias.

y una ultima cosa si deseo puedo poner este efecto qeu muestras, repetidas veces en una misma entrada...lo pruebo y te aviso si lo logre.... atte Oscar...

oscar dijo...

Probado y funciona excelente en firefox y se puede repetir varias veces en la misma entrada....., como siempre ..... haciendo las cosas bien buuuueeennnnaaa Santy....

SäNTÿ dijo...

Hola, oscar!!

hace mucho que no te veía por aqui, bienvenido de nuevo :P, para realizar el cambio de idioma es muy sencillo.

[1], entra a editar el gadget "HTML/Javascript" donde tienes el código de Facebook

[2], busca los dos textos en el código que dicen "en_US", sin las comillas con [Ctrl]+[F]

[3], una vez ubicados tienes que reemplazarlos con "es_ES" guardas el gadget y eso es todo!

Sigue pasando ;)

oscar dijo...

amigo.... tu como siempre el mejor en estas cosas... te superas a ti mismo
gracias de todo corazon y siemrpe recomendandote...a mis patas..

una tarea dificil para ti:
tenia una dirección de Tk (www.ocoila.tk) y me la eliminaron no entiendo el porque.. si me ayudas a entender que es lo que paso, para no cometer el mismo error nuevamente

oscar dijo...

hola de nuevo, amigo es un gusto poder saludarte y decirte que tus ayudas siempre son de lo mejor, y nuevamente apelando a tus conocimientos, quiero resolver un problema:
puse el efecto(este) de ocultar algunas partes de las entradas del blog, utilice el último (tipo enlace) sobre todo en una pagian del blogger y funciona bien, pero cada vez que deseo editarlo osea ir sl redactar el enlace se corta y cambia y direcciona al editor.

amigo se que tienes la respuesta, la estare esperando.

oscar dijo...

me olvide el blog y la página del problema es el siguiente: http://colegioadven.blogspot.com/p/docentes.html

SäNTÿ dijo...

oscar, disculpa la tardanza en contestar he estado fuera de linea por un largo tiempo...el problema que se te presenta es debido a que Blogger hace un escaneo del código del post y al momento de editarlo Blogger lo modifica.

Esto me pasaba cuando agregaba el código en vista de HTML en el editor y al momento de cambiar de vista de HTML a vista de Redactar el código ya estaba modificado erroneamente por nuestro buen amigo Blogger...

La solucion sería redactar todo en vista de HTML y asi publicar nuestros contenidos....un saludo!

Julio dijo...

Excelente ejemplo y demostración


Página Principal
Arriba