En esta entrada veremos 4 métodos para poner un spoiler y así puedas elegir el método que más se adapte a tus necesidades.
Spoiler sólo con CSS
Con este método usaremos las bondades del CSS sin tener que recurrir a scripts, sólo CSS y nada más.
Pero, tiene dos desventajas, la primera es que se necesitan dos botones, uno para mostrar el contenido y otro para ocultarlo.
El otro inconveniente es que al mostrar el contenido la página hace un pequeño scroll hasta posicionar la página donde esté el contenido.
Estos los pedreis instalar en una entrada en HTLM:
Vais a Entradas Abres HTLM y colocas este Código y pones lo que quieres ocultar donde dice....:Aquí el contenido que quieres ocultar...
El código que usarías en tus entradas para este tipo de spoiler con CSS sería el siguiente:
<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">
...Aquí el contenido que quieres ocultar...
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">
...Aquí el contenido que quieres ocultar...
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>
En color rojo debes poner el contenido que estará oculto. Lo que está en color azul lo debes cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno más cambia spoiler1 por spoiler2 y mostrar1 por mostrar2
Spoiler usando Javascript
Este tipo de spoiler es similar al spoiler que vimos hace algunos años, sólo que ligeramente modificado.
Su uso requiere Javascript, muy poco en realidad. Básicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.
<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">
...Aquí el contenido que quieres ocultar...
</div>
...Aquí el contenido que quieres ocultar...
</div>
De igual forma deberás cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras añadir uno nuevo.
Spoiler usando Scriptaculous
Este método ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Éste a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, dándole un toque más atractivo.
Para usarlo necesitamos tener Scriptaculous, si aún no lo tienes agrégalo antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
Y cuando quieras poner el spoiler en una entrada usa este código:
<input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/><div id='spoiler1' style='display: none;'>
...Aquí el contenido que quieres ocultar...
</div>
...Aquí el contenido que quieres ocultar...
</div>
En este caso también deberás cambiar las partes en azul siempre que quieras añadir más.
Spoiler usando jQuery
Por último vamos a ver cómo ocultar contenido con jQuery, con el cual también podremos conseguir un efecto deslizante al mostrar u ocultar el contenido del spoiler.
Si no tienes jQuery ponlo después de <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Y en tu entrada usa este código cada vez que quieras poner tu spoiler:
<input type="button" id="spoiler1" value="Mostrar"/>
<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>
<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>
Aquí otra vez hay que cambiar lo que está en azul cada vez que quieras añadir uno nuevo, por ejemplo spoiler1 por spoiler2 y mostrar1 por mostrar2
Y así de sencillo puedes ocultar contenido en las entradas de tu blog, incluso en un gadget HTML/Javascript y como puedes ver son códigos super cortos y sencillos de aplicar.
El contenido que puedes poner para ocultar puede ser el que sea, una imagen, texto, un reproductor, videos, etc., etc.
Fuente; ciudadblogger
Publicado por;
0 comentarios: