jueves, 21 de abril de 2016

Spoiler con CSS Javascript Scriptaculous y jQuery

Los spoilers sirven para ocultar cierto contenido de una entrada del blog, ya sea por estrategia o por estética, estos spoilers ocultan contenido y lo muestran sólo cuando el usuario lo solicita.
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.

 


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>

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 pormostrar2

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>
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'/>
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>
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>

Aquí otra vez hay que cambiar lo que está en azul cada vez que quieras añadir uno nuevo, por ejemplospoiler1 por spoiler2 y mostrar1 por mostrar.


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.

About the Author

Unknown

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.



::PUBLICIDAD::

Publicar un comentario

 
Coffee Code y SEO © 2016 - Diseñado por | Plantilla de Templateism Blogger Templates