Script para autogenerar botones de spoiler

Seguramente reinventé la rueda, pero cuando busqué cómo se hacía para agregar spoilers de este estilo al blog:

Bla bla bla
esto es un spoiler

Sólo encontré cómo hacerlo "manualmente". Así que armé un script que lo que hace es buscar elementos de clase spoiler, agregarles un botón antes y ocultarlos.


Script

function clickSpoiler(boton){
  
   var spoiler = $(boton).next(".spoiler");
   
   if(boton.value=='¡Spoiler!'){
      
      boton.value='Ocultar';
      spoiler.show();
      
   }else{
      
       boton.value='¡Spoiler!';
       spoiler.hide();
   }
    
}

function formatSpoilers(){
    
    var spoilers = $('.spoiler');
   
    //Agrego el botón spoiler antes de cada spoiler y oculto el spoiler.
    spoilers.before("<input type='button' class='boton-spoiler' value='¡Spoiler!' onclick='clickSpoiler(this)'/>");
    spoilers.hide();
  
}
    
//Le digo que se llame a la función formatSpoilers una vez que terminó de cargar la página.
$(document).ready(function() {
      
        formatSpoilers();
        
    });

¡Atención! Para que el script funcione es necesario incluir JQuery:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
   

Tengo el código subido a Google Drive (Cómo importar js/css/etc subidos a Google Drive), pueden usarlo directamente agregando esto en el head de la plantilla:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script src='http://googledrive.com/host/0B5-ml0fgoFXGMzR4VGtqcGZuYWM' type='text/javascript'/>

Uso

Para convertir algo en spoiler sólo hay que agregarle class="spoiler" al elemento. Ejemplo:

<div class="spoiler"> 
    Bla bla bla
</div>

Otra opción es reemplazar en el código los lugares donde dice $('.spoiler') por $('spoiler') (O sea, quitarle el puntito), y escribir los spoilers así:

<spoiler> Bla bla bla </spoiler>

Si alguien sabe cuál de las dos formas es mejor que me diga, lo ignoro.




¡Atención! Como el script se ejecuta al finalizar la carga de la página, los spoilers pueden leerse unos segundos antes de que aparezca el botón, para solucionar esto se puede poner display de los spoilers en none.

<div class="spoiler" style="display:none;"> 
    Bla bla bla
</div>

La desventaja de esto es que no se ven en el editor.

Otra opción que no tiene ese problema, es agregar en la plantilla un archivo CSS que contenga esto:

.spoiler{

   display:none;

}

Como el archivo no es procesado durante la edición, el texto no desaparece :)