Trucos Blogger: Spoiler

A veces queremos cosas en el blog, pero que no se muestren inmediatamente: Hablamos de una película y no queremos que a  nuestros visitantes, que no han visto el final, se lo chafen, o por ejemplo ponemos el enunciado de un problema y no queremos que se vea inmediatamente la solución.

Para ello podemos incluir un "spoiler" que sólo se mostrará si el visitante de nuestra página pulsa un botón. Hay varias maneras de conseguir hacer esto, pero vamos a usar una mediante javascript. Tranquilo. Solo copia y pega el código mostrado en las textarea y modifica únicamente el contenido a mostrar (u ocultar).

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

Puedes modificar el nombre que aparece en los botones editando las etiquetas correspondientes.

Vamos a ver un par de ejemplos.

Ejemplo 1

Cuanto es 2 + 2

4

Aquí ves como lo he hecho.

<input 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 = 'Solucion'; }" type="button" value="Solucion" /><br /> <br /> <div id="spoiler1" style="display: none;"> 4 </div>

Ejemplo 2

¿Tu sabes como acaba Titanic?

¡¡¡¡ Jack SI cabía!!!!

Por cierto, si vas a insertar varios spoilers en la misma entrada, como aquí, tendrás que cambiar en el código donde pone spoiler1 por spoiler 2, spoiler 3 (según el numero de ellos que pongas)

<input onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''; this.value = 'Tapa eso'; }else{document.getElementById('spoiler2') .style.display='none';this.value = 'Muestralo'; }" type="button" value="Muestralo" /><br /> <br /> <div id="spoiler2" style="display: none;"> ¡¡¡¡ Jack SI cabía!!!! <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cwNArp7U-3mNSSCzQnvdkMKt7eUorbcPBLpLUC5z-oHr_BjsSO7qnxefS1SkrxoLCTnIrRzFdn6xvOEN-Z7ZlXyx4fmEnvTcl-sOGMlFH1TRGjdjWLUCrr5mrMT0PKFAdKUSQwC15IQA/s1600/D0A.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="525" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cwNArp7U-3mNSSCzQnvdkMKt7eUorbcPBLpLUC5z-oHr_BjsSO7qnxefS1SkrxoLCTnIrRzFdn6xvOEN-Z7ZlXyx4fmEnvTcl-sOGMlFH1TRGjdjWLUCrr5mrMT0PKFAdKUSQwC15IQA/s1600/D0A.jpg" /></a></div> </div>