Come creare uno spoiler in un post senza javascript esterni.

Come nascondere del testo formattato, dei video, dei giochi, delle immagini e altri oggetti HTML per creare uno spoiler in modo da non mostrare anticipazioni di film, serie TV o libri senza il consenso del lettore che si manifesta con un click su un link o su una icona.

Gli spoiler sono dei sistemi di impaginazione di contenuti molto utilizzati per esempio nelle recensioni letterarie e cinematografiche. Si tratta di un termina mutuato dalla areodinamica che indica l'appendice posta sulle ali degli aerei che funziona come un deflettore di flusso e serve per aumentare o diminuire la portanza ovvero la spinta verso l'alto che serve per bilanciare il peso dell'aereo.

Quando il termine spoiler è invece associato a un film, a un gioco, a una serie televisiva o a fumetti si intende una anticipazione della trama o comunque di importanti informazioni circa l'opera di cui stiamo consultando la recensione. Inserire uno spoiler serve soprattutto a che non abbia ancora visto il film o letto il libro per non rovinarsi l'effetto sorpresa. All'atto pratico per realizzare una simile funzionalità si possono nascondere le informazioni e permettere solo a chi lo voglia di visualizzarle cliccando in un apposito link o bottone o immagine o icona appositamente create.

Vediamo tre possibili tipologie di spoiler. Cliccando sugli elementi visualizzeranno i contenuti al loro interno solo gli utenti che vogliano leggere le anticipazioni di un film o la trama di un libro.

Questo contenuto si visualizzerà solo dopo aver cliccato sul pulsante.
Mentre, se si clicca una seconda volta, verrà nuovamente nascosto

Mostra / Nasondi ▼▲

Si può nascondere un contenuto anche attraverso una immagine.
Il funzionamento è lo stesso. Il contenuto formattato e inserito come codice, viene visualizzato quando si clicca sopra all'immagine e viene nascosto se si va nuovamente sul mouse

Nel caso di un semplice bottone il codice da incollare in Modalità HTML è il seguente

<div class="nascosto">
<input type="button" value="Mostra" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Nascondi'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostra'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>Codice del contenuto da nascondere con lo spoiler</p>
</div></div>

dove al posto della scritta in blu possiamo inserire il codice del testo formattato da nascondere.

Se invece si opta per un link come nel 2° esempio il codice da incolare in Modalità HTML  diventa

<div class="nascosto1">
<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';}" >Mostra / Nasondi &#9660;&#9650;</a>
</div><div><div class="nascosto1" style="display: none;">
<p>Codice del contenuto da nascondere</p>
</div></div>

dove al posto della scritta in blu si incolla il codice del contenuto da nascondere mentre la parte in rosso è il link che viene mostrato ai lettori con le Entità delle due frecce. 

Se infine si opta per una immagine su cui cliccare il codice diventa

<div class="nascosto2">
<img src="URL_IMMAGINE" 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="nascosto2" style="display: none;">
<p>Codice del contenuto da nasondere</p>
</div></div>

dove al posto di URL_IMMAGINE va incollato l'URL diretto di una immagine caricata su Picasa. Possiamo nascondere oltre a testo anche video, immagini, giochi o altri oggetti HTML.

OSSERVAZIONE IMPORTANTE: Questi javascript dovrebbero funzionare in tutte le pagine web e con tutti i browser che supportano questa tecnologia. Se avete un blog su piattaforma Blogger è fondamentale che il codice del javascript sia l'ultima cosa che incollate nel post. Dovete farlo andando su HTML  Dovete inoltre pubblicare da lì senza cliccare sul pulsante Scrivi. Nel caso doveste modificare l'articolo è essenziale che incolliate nuovamente il codice del javascript.