Desde los primeros días de esta bitácora llevo subiendo los códigos de los programas directamente, lo que provoca, aparte de unas entradas sumamente largas, que cueste un poco seguir el hilo de las explicaciones según como de extensos sean los ejemplos.
Para facilitar que todos puedan navegar mejor por las entradas de este blog, a partir de ahora los códigos se mostrarán sólo si se pulsa en botón de Mostrar | Ocultar tal y como vemos en el siguiente ejemplo
¿Cómo conseguir este efecto?
Lo primero es ir a Plantilla - Editar HTML y nos cercioramos de que en el head no tenemos agregado JQuery. En ese caso añadimos la siguiente línea
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
(Para comprobar si tenéis JQuery hay que buscar la anterior línea en el código).
Una vez hecho eso, en cada entrada que queramos realizar un spoiler añadimos el siguiente código en la sección HTML
<input type="button" id="Spoiler1" value="Mostrar | Ocultar"/><div class="Mostrar1" style="display: none;">...Aquí el contenido que quieres ocultar...</div><script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#Spoiler1').click(function(){jQuery('.Mostrar1').slideToggle("slow");});});</script>
En caso de que quieras añadir más de un spoiler en la misma entrada, deberás cambiar las partes en rojo. Es decir, si quieres añadir una segunda, Spoiler1 pasará a ser Spoiler2 y Mostrar1 será Mostrar2.
Eso es todo lo que os quería contar. Hay otras formas de hacerlo, con CSS, JavaScript, Scriptaculous... Cualquier otra forma puedes publicarla en comentarios y así compartimos conocimientos entre todos.
¡Saludos!
0 comments:
Publicar un comentario