Come nascondere testo, video, immagini o altro all'interno di un articolo.

Come nascondere contenuto con javascript per poi mostrarlo a chi clicca su un link o una immagine. Può essere usato per uno spoiler nelle recensioni letterarie e cinematografiche.

Avrete certamente trovato delle pagine web suddivise in varie sezioni e in cui sono visibili solo i titoli. Nel momento in cui si clicca sopra a uno di questi, si visualizza il contenuto relativo. Questo metodo è spesso utilizzato nelle pagine delle FAQ o in quelle dei termini e condizioni relativi a un sito o a un servizio. Anche in certi blog può essere interessante inserire delle funzionalità di questo genere.

In precedenti articoli ho illustrato come nascondere un widget in un blog su Blogger e come espandere un widget o del testo formattato con Scriptaculous. Con il sistema che vado a presentare non occorre aggiungere librerie esterne ed è quindi tutto molto più leggero. Partiamo da tre esempi e successivamente indicherò come realizzarli. Cliccando sul bottone, sul link o sulla immagine sottostanti, vedrete apparire del contenuto nascosto

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 bottone il codice da inserire 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>Contenuto da nascondere</p>
</div></div>

Dove al posto di <p>Contenuto da nascondere</p> può essere inserito un codice HTML di un testo formattato o di un oggetto. Il testo del bottone Mostra e Nascondi può essere personalizzato a piacere. Se si sceglie un semplice link, allora il codice da utilizzare 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>Contenuto da nascondere</p>
</div></div>

Dove il contenuto da nascondere deve essere inserito con le modalità precedenti e il link Mostra / Nasondi &#9660;&#9650; può essere personalizzato a piacere. Ricordo che &#9660;&#9650; rappresentano rispettivamente la freccia in giù e la freccia in su. Infine, se si opta per una immagine, dobbiamo mettere nell'articolo quest'altro codice

<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>Contenuto da nasondere</p>
</div></div>

in cui c'è da incollare l'URL della immagine che dovrà essere precedentemente incollata su un hosting quale Picasa. Come vedete ho nascosto anche un video ma lo si può fare anche con un documento, un iFRame, una mappa e altro ancora. Ci potrebbero essere delle difficoltà di funzionamento a postare con Windows Live Writer.