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

Mostrar u Ocultar elementos con DHTML

Ya había descrito como ocultar o mostrar algún contenido con hacer click en un botón o en un enlace. Pero lo que sucede con ese código es que solo se puede utilizar un botón seguido del contenido, para esto existen varias soluciones la mas sencilla para aplicar en un blog es la de crear una función tipo "toggle" que haga el trabajo sucio.

Un ejemplo del funcionamiento de dicha función o algoritmo es el siguiente:

Este elemento será el que se oculte dinamicamente por intervencion de los lectores del blog, puede ser una imagen, una video, un gadget, una entrada incluso o cualquier elemento.
Y este es otro del mismo tipo, xD

Ocultar 1 Ocultar 2 Ocultar ambos

[1]Para lo cual es necesario que vayas a Diseño>Edición HTML>Sin expandir las plantillas de artilugios.

[2]Despues de entrar busca con
Ctrl + F
</head> y antes de esa etiqueta escribe lo siguiente:

<script type="text/javascript">/*<![CDATA[*/SantyToggle = function(id,idA){id=id.split(",");for(var i=0;i>id.length;i++){var santyTmP;santyTmP=document.getElementById(id[i]).style;idA=(idA !== '' ? document.getElementById(idA):'');if(santyTmP.display === ''){santyTmP.display = 'none';idA.innerHTML = 'Mostrar';}else{santyTmP.display = '';idA.innerHTML = 'Ocultar';}}};/*]]>*/</script>

[3]Una vez instalada la función podremos aplicarla de las siguientes maneras:

<div id='ID_del_elemento'>Este elemento será el que se oculte</div>

<div id='ID_del_elemento_2'>Este elemento será el que se oculte</div>
Este elemento puedes situarlo en cualquier parte de tu blog, incluso en un gadget.

<a id='ID del enlace' href="#" onclick="SantyToggle('ID_del_elemento,ID_del_elemento_2','ID del enlace')">Ocultar</a>
Este enlace puedes colocarlo donde sea dentro de la página.

El texto en color:
Rojo:Es el ID del elemento que quieres ocultar, si son dos o mas elementos los que quieres ocultar/mostrar es necesario que los separes con una coma y que no tengan espacios. Y debe ser el mismo en los dos códigos.

Podemos ocultar/mostrar gadgets de nuestro blog, conociendo el "ID" del gadget(puede ser incluso el gadget de Navbar, entradas, header), para eso editaremos el que necesitamos mostrar/ocultar y de la siguiente manera veremos el ID:
[1] Hacemos click en editar, en el gadget que queramos:

Hacer click en editar


[2] En la barra de direcciones localizaremos lo siguiente:

Identificar la ID

Como se puede observar en la imagen, el ID de este gadget es: "HTML121" y lo puedo colocar en los códigos anteriores en 'ID del enlace'.


El texto en color:
Azul:Este es opcional, y es el ID del enlace, no debe tener ningún espacio. Debe ser el mismo también.

#

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:

8 comentarios !

ReverieM dijo...

Hola Santy, muy buen efecto que pones aqui; ya lo habia visto con otro metodo pero este se me hace mas facil xD
A proposito, tengo unas consultas (no estoy seguro de si ya las has publicado aqui, pero no las encuentro): Primero es sobre el slide que tienes en el gadget de 'Entradas Recientes', yo tengo uno parecido, pero esta en la cabecera y no se como cambiarlo de lugar; ademas que no puedo hacer que funcionen los botones guia de abajo...
La seguna es como haces para ese efecto en tus links de enlace? y tambien como hacer que al darle click se muestre el codigo, luego al darle click a este se seleccione y finalmente como subir una naimacion y enlazarla?
Bueno, creo que eso seria todo, un poco largo pero me da mucha curiosidad saber como funcionan.
Saludos.

Abre Paréntesis dijo...

santy por fin veo que te conectas, tio necesito tu ayuda con un script avisame en cuanto puedas es urgente!

SäNTÿ dijo...

ReverieM, disculpa la tardanza xD, por el momento lo del banner aqui esta: http://santyweb.blogspot.com/2011/01/como-colocar-codigo-de-enlazame.html
Estoy preparando la demás información, se un poco paciente ;)!!

Abre Paréntesis, OK :P!!

ReverieM dijo...

Gracias santy, no hay problema, esperare el resto y ya leo el primero.
Saludos ;)

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

hola santy, está muy bien este efecto, pero yo kería preguntarte por algo diferente si me lo permites. Verás el sistema que tienes para ampliar las letras del post con lo de +A|A|-A está muy bien para personas que no ven muy bien, me gustaría implementarlo en mi blog. podrías enseñarme porfavor??

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, claro que si, es facil de implementar ;), esta explicado aqui:
http://santyweb.blogspot.com/2009/03/aumentar-y-reducir-el-tamano-del-texto.html

Suerte con ello, saludos!

Maca dijo...

hey muy interesante la entrada! (: por favor necesito que me ayuden porque no me resulta no se que estoy haciendo mal . espero una respuesta rapida, desde ya muchas gracias :)

Maca dijo...

ah una ultima cosa paso 2 y 3 no se entiende o no entiendo donde ponerlos lo que quiero hacer es ocultar los labels y los archivos del blog y hacer click y que aparezcan no se si se entienten pero, como esta explicado ahi no lo entiendo a donde pegar los cod.


Página Principal
Arriba