Spoiler para ocultar y mostrar contenido en una entrada

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente botón.

Este es un contenido que permanecerá oculto hasta que el lector quiera verlo, y podrá esconderlo nuevamente presionando otra vez el botón.

Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.

Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón

Mostrar / Ocultar ▼▲

En ese caso el código a usar es este:

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

O si lo prefieres también puedes usar una imagen.

¿Qué significa SOS?
Save Our Souls
Save Our Ship
No significa nada
Socorro Oh Socorro

Ahí el código sería este:

<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Bastante práctico y fácil de usar ¿no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. Sólo procura no cambiar a la pestaña Redactar una vez que lo pongas y no modifiques los espacios del código para que funcione correctamente.