Agregar un boton spoiler

Últimamente me he topado con algunos foros, blogs o webs que están usando los llamados spoilers pues en un acto de ociosidad (como de costumbre -__-U) me di a la tarea de investigar como hacer uno y de paso descubrir para que sirve originalmente (emmm cual seria mi prioridad?) ya que podemos darle el uso que queramos jeje n__n

Estos botones sirven para no echar a perder la trama a alguien que no sepa completamente el tema del que estamos hablando, ya sea que estemos ofreciendo una critica de una película y en algún momento nos da por decir algo que es de suma importancia pero no queremos fastidiarle el momento a alguien que no la ha visto, pues ahí entra en acción un spoiler, pues podremos ponerlo y advertir que ahí esta algo que podria arruinarle la película.

Spoiler texto que puede develar informaciones futuras, la palabra spoiler proviene del inglés «spoil» cuyo significado es «estropear(se), echar(se) a perder, arruinar(se)». Spoiler quiere decir aguafiestas. Es bastante común que esta palabra aparezca en reseñas, comentarios, monografías, etc., indicando la situación antes mencionada, para aquellos que consideran los adelantos perjudiciales para el disfrute de la historia. http://es.wikipedia.org/wiki/Spoiler

Bueno, despues de tanto choro pasemos a lo mas importante xD poner uno en nuestra web. Y para ello solo necesitaremos pegar este codigo donde queramos que aparesca:

<div style="background-color: #CCCCCC; border: 1px solid #666666; padding: 5px;">
Este es un spoiler: <span>
<span style="margin-bottom: 5px;">
<input class="button" value="Mostrar" style="margin: 0px; padding: 0px; font-size: 12px;" onclick="if (this.value=='Mostrar') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button">
</span>
<span>
<span style="border: 0px dashed rgb(11, 25, 140); padding: 0pt 3px; display: none;"><br>
Esto es un texto oculto<br>
o un spoiler como le quieran llamar<br>
jajajajaja xD
</span>
</span>
</div>

El resultado sera como este: (esque en mi blog se cambia un poco)

Este es un spoiler:
Esto es un texto oculto
o un spoiler como le quieran llamar
jajajajaja xD

Pues nada mas es cuestion que practiquen un poco modificandolo y ya veran. chau!