En realidad este truco sirve para mostrar y ocultar cualquier cosa que se quiera tener "recogida": listas de enlaces, texto, una entrada completa, parte de una entrada, texto acompañado de una imagen....
Es muy muy simple...de forma que inicialmente provoca pocos dolores de cabeza.
1. Diseño>Edición de HTML>expandimos artilugios
2. Control+F y buscamos ]]></b:skin> Colocamos antes:
.commenthidden {display:none}
.commentshown {display:inline}
3. Colocamos el script antes de </head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
4. Allí donde se desee mostrar el efecto se coloca el 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 (listas de enlaces, texto, una entrada completa, parte de una entrada, texto acompañado de una imagen) lo colocas justo antes del último </div> del código.
Si vas a mostrarlo en la sidebar (listas de enlaces...) el código es similar a:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Links de blogs amigos </a><br />
<div class="commenthidden" id="UniqueName"><a href="url"target="_blank">Texto a mostrar del enlace</a></div>
Lo que está en negrita se modifica según convenga...
• Cuando pinchemos sobre +/- se abrirá o recogerá.
Cuidado:
Fijaros que en el último código tiene una id correspondiente a UniqueName. Si se coloca otro elemento que haga ese mismo efecto habrá que darle una id distinta, p.ej: UniqueName1, UniqueName2 .... o la que sea.
Fuente: Vgu
Ampliación de la entrada
Para ocultar / mostrar cualquier cosa en las entradas o en la sidebar; tampoco requiere archivo externo para funcionar.
1. Diseño>Edición de HTML>expandimos artilugios
2. Control+F y buscamos </head> justo encima se añade:
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
3. Guardar.
4. Para usar el script se añade en la entrada o en sidebar (según lo que sea)...
<a style="font-weight: bold;" href="javascript:void(0);" onclick="expandcollapse('AQUI UN NOMBRE UNICO PARA CADA MENU: EJEMPLO1')">TITULO: ABRIR-CERRAR [+/-] <img src="URL IMAGEN" /></a>
<ul id="AQUI UN UNICO PARA CADA MENU: EJEMPLO1" class="texthidden">
AQUI LO QUE VA OCULTO: TEXTO, IMAGEN, ENLACES, ETC. Y CUANDO ACABAMOS, CERRAMOS EL CODIGO CON LA SIGUIENTE LINEA:
</ul>
Cuidado: Se puede colocar un texto o sólo una imagen, de ahí que se pueda eliminar o no la línea <img src="URL IMAGEN"/>
► Te puede interesar:
- Expandir entrada con el post footer incluído
- Expandir entradas en página principal - home
- Listado títulos de entradas en página de etiquetas
- Intentar ver un número determinado de entradas en las anteriores y antiguas
- Mostrar y ocultar cualquier cosa con script simple
- Etiquetas expandir y recoger con script simple
- Archivos Feed expandir o contraer con script simple
- Fórmula simple de contraer o expandir un gadget
- Expandir un post de forma simple
• Con JavaScript con script.aculo.us o prototype - Clásico
• Expandir o recoger un gadget con Scriptaculous - moderno
• Expandir y recoger parte de una entrada con Scriptaculous
• Expandir post con efecto deslizante con javascript
