Spoler para nuestras entradas

Hoy vamos a mostraros lo que es un Spoiler.
Spoiler es una caja donde podemos mostrar y ocultar cierto contenido en nuestras entradas.
Podemos poner dentro cualquier cosa que se nos ocurra, tanto un texto, como un vídeo ect..Como ya hemos comentado en este post
Pero hoy vamos a ver mas opciones:

Poner un Spoler con CSS.

Este es un Spoler CSS con un botón de mostrar contenido y otro de ocultar contenido.




Este seria el código a utilizar en tu entrada

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

Cambiamos lo marcado en rojo por el texto a ocultar.

Poner un Spoler con JavaScript.

Este es un Spoler JavaScript, básicamente igual que el anterior pero los estilos marcados son de Java

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

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso