Mostrar y Ocultar +/-

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Este es un efecto que queda muy bien para una lista, lista de links, parte del texto de un post o cualquier cosa que queramos tener "recogida".
En mi blog de pruebas lo he puesto en la sidebar con una lista de links, incluso pueden añadirse imágenes de enlace, o una imagen pequeñita como una flechita o algo así antes de cada link.
Lo he probado en una entrada completa ocultándola y funcionó, y también lo he probado ocultando parte de una entrada y resulta muy bien.
He usado el sistema para ocultar un trozo de texto acompañado de una imagen y tampoco me ha dado problemas.

[1-] Colocaremos este sencillo 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 pequeño 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-] Donde queramos mostrar el efecto (un nuevo elemento, una entrada,etc.) hemos de colocar este código:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a><br />
<div class="commenthidden" id="UniqueName"></div>


Lo que vas a mostrar/ocultar lo colocas justo antes del último </div> del código.
Si vas a mostrarlo en la sidebar con una lista de links, por ejemplo, el código a poner sería más o menos así:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Links amigos </a><br />
<div class="commenthidden" id="UniqueName"><a href="http://elescaparatederosa.blogspot.com"target="_blank">El Escaparate</a></div>

El resultado se verá así:

+/- Links amigos


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 (fijaros que hay dos) lo sustituimos por una palabra cualquiera (no se mostrará en la plantilla) que no se esté usando en otro código de nuestra plantilla.
Si vas a colocar más de un elemento con este efecto, recuerda que no puedes usar la misma palabra.
Yo en mis pruebas para usar el efecto más de una vez, decidí dejar el "UniqueName" y al segundo elemento le añadí un 1 detrás "UniqueName1", al tercero un 2 "UniqueName2"... y sin problemas.

Visto en : BlogU

0 comentarios:

Publicar un comentario