Spoiler Mostrar/Ocultar contenido

Hola amigos, en este nuevo tutorial les voy a enseñar a agregar un spoiler para ocultar/mostrar contenido en su blog, en su codigo muy pequeño, y aqui mismo podran ver el demo, este spoiler es a veces muy importante, ya sea que tengas muchas imagenes en tu blog, y no las quieras mostrar todas solo con cargar la pagina, si no que quieres ocultar algunas par aligerar la carga, pero no quieres simplemente eliminar esa imagen, tambien puede servir para blogs como este, a veces yo pongo codigos muy largos y se tienen que ocultar para aligerar la carga, por ese motivo les dejo esto, para agregarlo, solo tienen que pegar el siguiente codigo donde quieren que salga el spoiler:

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

Y listo, ya tienen su contenido oculto, es verdaderamente facil verdad :D bueno eso fue todo en este tutorial, espero que les haya servido y que lo utilizen, yo estaré pensando en usarlo.

Demo:


Nota: El boton aunque funcionara como funciona aqui, no tendra los mismos estilos, ya que lo personalice un poco, pero ustedes tambien lo pueden hacer, para personalizarlo solo agreguen en la edicion HTML de la entrada el siguiente codigo:

<style>
.divspoiler input{
background: #333; /* Aqui va el color de fondo del boton */
border: none; /* Selecciona none para que no tenga border, o elimina la liena para que tenga borde */
border-radius: 3px; /* Las esquinas redondeadas */
width: 60px; /* El ancho del boton (opcional) */
height: 25px; /* El alto del boton (opcional) */
color: #fff; /* El color del texto */
cursor: pointer; /* Forma del cursor */
font-family: sans-serif; /* Fuente del texto */
font-weight: bold;
}
</style>