Come mostrare o nascondere contenuto cliccando su un bottone.

Come rendere visibile una parte di una pagina web solo a chi clicca su un pulsate e mostra la volontà di volerlo visualizzare.

Ci sono siti di recensioni letterarie, cinematografiche o televisive che si trovano nella necessità di scegliere tra una linea editoriale che illustri ai lettori tutta la trama, finale compreso, e un'altra linea in cui si mantiene riservata almeno la fine di un film o di un romanzo giallo per non danneggiare i potenziali lettori o spettatori.

In un blog si può trovare un compromesso tra queste due esigenze inserendo la parte sensibile della recensione insieme a un pulsante che la mostri o la nasconda con l'avvertenza di leggerla solo nel caso non si sia interessati a vedere il film o a leggere il libro. Vediamo come inserire una tale funzionalità in un blog di Blogger. In realtà questo sistema funziona con tutte le piattaforme e in tutte le pagine web.

Dopo aver salvato il template si va su Modello > Modifica HTML, si clicca nell'area del codice, si digita Ctrl+F e, nel campo che si apre, si incolla </head>. Si pigia su Invio e nel modello si visualizzerà tale riga evidenziata. Subito sopra a tale riga si incolla questo codice

<style type="text/css">
.showbutton {display:block;margin:4px 0;}
.nascondi {overflow:hidden;background: #fcfcfc;}
.nasondi > div {-webkit-transition: all 0.3s ease;-moz-transition: margin 0.3s ease;-o-transition: all 0.3s ease;transition: margin 0.3s ease;}
.showbutton[value="Mostra"] + .nascondi > div {margin-top:-100%;}
.showbutton[value="Nascondi"] + .nascondi {padding:4px;}
</style>

Si salva il modello. Quando si vorrà inserire un contenuto nascosto che può essere svelato da un pulsante, nell'Editor di Blogger si andrà su HTML e si incollerà un codice come questo

<input class="showbutton" type="button" value="Mostra" onclick="this.value=this.value=='Mostra'?'Nascondi':'Mostra';">
<div class="nascondi"><div>
Incollare il codice o il testo piano del contenuto da nascondere
</div></div>

dove potremo inserire solo del semplice testo o anche un contenuto formattato con colori, link immagini, video e altri oggetti HTML. Al posto di Mostra e Nascondi possono essere inserite altre espressioni così come si può variare la durata della transizione ora fissata a 0.3 secondi. Si può anche personalizzare il colore di sfondo del contenuto nascosto (#fcfcfc). Oltre che per siti di recensioni un tale sistema può essere utile quando si voglia tenere nascosto un elemento che potrebbe portare disagio nei lettori

Avevo già pubblicato un tutorial su come nascondere dei contenuti senza modificare il modello o come nascondere il contenuto di un widget per poi mostrarlo cliccando su un bottone per risparmiare spazio.