Revista Blog

Poner un Spoiler ocultando partes del contenido con jQuery

Por Aizum Blog @aizumblog
Poner Spoiler con jQuery
Para está ocasión, tengo preparado un tip para insertar un spoiler para ocultar y mostrar contenido de forma deslizante, con una librería denominada jQuery; SlideToogle. El efecto y truco, consiste en mostrar u ocultar, un DIV, con jQuery, cómo ya hemos hablado antes. Lo puedes añadir en Blogger, en una entrada, en la columna lateral, o dónde se te ocurra, o en una web. Como siempre, una demo vale más que mil palabras, puedes verlo en acción, dicho spoiler, seguidamente, para que os hagáis una idea del efecto reseñado. Enjoy this!

Ahora, una vez visto la demostración, veremos cómo insertarlo:
  1. Entra en Blogger
  2. Busca con Ctrl+F la etiqueta </head>
  3. Y antes de dicha etiqueta, es decir; </head>
  4. Copia y pega el siguiente script.
  5. Si ya tienes jQuery, la primera línea de código, omite ese paso. No la insertes.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

<input type="button" id="spoiler" value="Mostrar/Ocultar"/>
<div class="mostrar" style="display: none;">

...Aquí debes de colocar el contenido que quieres ocultar...

</div>
<script>$(document).ready(function(){$('#spoiler').click(function(){$('.mostrar').slideToggle("slow");});});</script>

Get free premium widgets for your blog and website.

Volver a la Portada de Logo Paperblog