Expand/Collapse, Ocultar/Mostrar

Este es un truco para ocultar y mostrar cualquier cosa que deseemos tener "recogida". Pueden añadirse enlaces, imágenes, listas, etc. Se puede usar en las entradas o en los widgets.

1. Colocamos este código en la parte del CSS de nuestra plantilla, por ejemplo antes de ]]></b:skin>:


.commenthidden {display:none}
.commentshown {display:inline}

2. Colocamos ahora este script justo antes del </head> de nuestra plantilla.

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else { whichpost.className="commentshown"; }
}
</script>

3. Colocamos este código donde queramos (entradas, widgets, etc.):

<a title="Ver/Ocultar"
href="javascript:togglecomments('UniqueName')">
+/- Título</a><br />
<div class="commenthidden" id="UniqueName">

AQUÍ LO QUE QUEREMOS OCULTAR

</div>

Cuando pinchemos sobre +/- se abrirá la lista de links o lo que sea que hayamos puesto, cuando se vuelva a pinchar se recogerá.

Importante

Donde dice "UniqueName" dentro del último código lo sustituimos por una palabra cualquiera que no se esté usando en otro código de la plantilla.

Si vas a colocar más de un elemento con este truco, recuerda que no puedes usar la misma palabra.

Dejando el "UniqueName" y añadiendo al segundo elemento un 1 detrás "UniqueName1", al tercero un 2 "UniqueName2"... funciona perfectamente.

Truco de BlogU

10 comentarios:

Hugo Mosh

No me funciono tu truco.
No se que hice mal. Me podrias explicar.

jesgo

Hugo, sin saber lo que has puesto y quieres hacer no te puedo decir. Si lo deseas mándame un email con lo que has puesto.
Un saludo

Ana

A mi no me funciona se ve la imagen que quiero ocultar y no te puedo poner el html porque no me deja el comentario pero puedes ver lo que ocurre en la entrada Solucio Exercici Nombres Enters" se ve la imagen y no la oculta el html me dice tag is no completed y el blog http://matematiqueseso.blogspot.com

jesgo

Ana, mándame un e-mail con lo que has puesto y le echaré un vistazo.
Saludos.

Ana

Te lo he enviado. Espero que lo hayas recibido porque aqui el html no me lo permite. Gracias.

jesgo

Lo siento Ana, no me llega tu email. Te lo recuerdo: jesgo999@gmail.com
Saludos.

jesgo

Ana, ya me llegó y te contesté, espero que te valga. Ya me comentarás.
Saludos

Ana

Hola Jesgo, sigue sin funcionarme, lo he repasado todo por si acaso pero no, me sigue diciendo error pagina.

Ana

Bueno, al final lo conseguí, pero no en la entrada sino como artilugio html en la barra lateral. No sé por qué no puedo en la entrada, me sigue diciendo error pagina, srá que en las entradas es otro código. Gracias ana.

jesgo

Ana, debería funcionar igualmente en la entrada. Mándame la entrada entera y lo miraré. Saludos.

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License