Reseña:
Blog
,
Swicht
,
Taller
Hoy me preguntaba un chico en un correo que cómo podría hacer para mostrar, en su sidebar, unas explicaciones "escondidas". Es decir: mostrar el título de lo que fuera que había que comentar y, ocultos, los pasos a dar. Le recomendé un "toogle", pero... he estado pensando que hay otra cosa más sencilla
:
1º.- Ir a Edición de plantilla y colocar, antes del cierre /head, el siguiente script:
<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>
Guardar los cambios.
2º.- Ir a Diseño de Plantilla, y cread el siguiente elemento de HTML-Java, con los datos que queramos:
<a href="javascript:void(0);" onclick="expandcollapse('UNIQUENAME')"> [+/-] ABRE</a>
<ul id="UNIQUENAME" class="texthidden"><li><a href="">LOQUEQUIERAS1</a></li><li><a href="">LOQUEQUIERAS2</a></li></ul>
El "Uniquename" es la ID-identificación del elemento y, claro... debe ser "única", de manera que podemos colocar entre las comillas el apelativo que nos parezca, siempre y cuando no repitamos el mismo en ningún otro lugar de la plantilla. Dentro de las comillas de la URL podéis incluir una dirección, a donde queráis que os remita... en este ejemplo lo he deajado vacío.
Y quedaría así:
Pd: Se me olvidaba... que esta idea la he sacado de una explicación, algo más complicadilla, de
A Consumig Experience.
También podéis tener subcategorías, siguiendo este esquema:
Eso sí: no he puesto URL de ninguna clase... que ya me dura la explicación más de lo que me da la fuerza de voluntad :(... o sea: que si queréis que al picar en cada subcategoría os lleven a alguna parte, pues... tenéis que ncluir la URL, claro):
Y ahora, el código de este ejemplo:
<ul><li><h2>Instruccione en:</h2></li><li><h2><a href="javascript:void(0);" onclick="expandcollapse('primero')"> [+/-]comer/beber</a></h2><ul id="primero" class="texthidden"><li><a href="javascript:void(0);" onclick="expandcollapse('segundo')"> [+/-] puré</a> <ul id="segundo" class="texthidden"> <li><a href="Permalink1">Comidas</a></li> <li><a href="Permalink2">Bebidas</a></li> </ul></li><li><a href="javascript:void(0);" onclick="expandcollapse('ostras')"> [+/-] agua</a> <ul id="ostras" class="texthidden"><li><a href="Permalink3">Bebidas</a></li> </ul></li></ul></li><li><h2><a href="javascript:void(0);" onclick="expandcollapse('arf')"> [+/-] Modales</a></h2><ul id="arf" class="texthidden"><li><a href="Permalink4">En la Mesa...</a></li><li><a href="Permalink1">servilletas</a></li></ul></li></ul>
Ahí, donde dice "PermalinkURL", es donde tenéis que introducir la URL en cuestión. Y, donde dice "ID", el "UNIQUENAME" del que ya hemos hablado: por supuesto, distinto para cada categoría.
Es más fácil hacerlo que explicarlo, de verdad.
Dejar un Comentario