Scuolissima.com - Logo

Bottone per Nascondere un Testo su Blogger (HTML)

Una funzionalità che ho visto molto spesso sui forum è il bottone dello spoiler, che viene solitamente utilizzato per inserire diciture o frasi umoristiche in modo apparentemente nascosto. Per fare un esempio può avere la stessa funzione del PS. inserito al termine di una discussione per non andare troppo fuori discorso oppure può essere usato ad esempio per non raccontare apertamente una parte di un film, un cartone, di una storia per non rovinarne la trama. Su Scuolissima.com l'ho utilizzato per creare dei piccoli esercizi come per esempio l'esercizio sulle equivalenze.

Se sui forum si può attraverso un bottone non si può certo dire la stessa cosa con Blogger che non mette a disposizione tale bottone negli strumenti per creare un nuovo post. A tal proposito vi fornirò diversi codici, ognuno coi suoi pregi e difetti.

1° Bottone



INSERISCI TESTO QUI


Qui sotto è riportato lo stesso codice che ho usato per realizzare il bottone soprastante che vi permetterà facendo click su di esso di mostrare o nascondere un testo. Il codice lo dovete inserire nella modalità HTML all'interno di un post e, solamente dopo la pubblicazione sarà funzionante mentre se lo testate con il post ancora in fase di creazione non vi funzionerà. Il seguente bottone può funzionare anche all'interno di un gadget HTML/Javascript.
<input value="Apri / Chiudi" style="margin: 0px; padding: 0px; width: 130px; font-size: 13px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Chiudi'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Apri'; }" type="button"> </div><br /><div style="margin: 0px; padding: 5px;  border: 1px inset; background: #f3f3f3 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color:#008250; line-height: 1.4em;"><div style="display:none;">INSERISCI TESTO QUI<br /></div></div></div>
Nel codice in grassetto e in rosso sono stati evidenziati le più comuni modifiche che si possono effettuare in questo codice.

Apri / Chiudi = può essere modificato e sostituito da altre parole come On/Off, Mostra/Nascondi, oppure da una sola parola come ad esempio spoiler, oppure se si tratta di un esercizio, soluzione.

Il testo che volete nascondere lo dovete inserire al posto di Inserisci testo qui.

2° Bottone (senza riquadro)

Se il codice precedente non è di vostro gradimento perché mostra quella riga grigia potete utilizzare quest'altro codice, ma l'unico modo per renderla funzionante è salvare il post in modalità HTML, viceversa salvato nella modalità SCRIVI non si aprirà il testo nascosto:
<div class="nascosto">
<input type="button" value="Soluzione" 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 = 'Soluzione'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>INSERISCI TESTO QUI</p>
</div></div>

3° Tramite Testo (senza bottone)

Il bottone occupa più spazio di un normale testo, anche senza il bottone si può nascondere un testo, ad esempio utilizzando il codice sottostante apparirà o scomparirà cliccando sul testo Mostra/Nascondi.
<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 / Nascondi &#9660;&#9650;</a>
</div><div><div class="nascosto1" style="display: none;">
<p>INSERISCI TESTO QUI</p>
</div></div>

4° Tramite Immagine

Si può anche inserire una immagine da cliccare per mostrare il testo nascosto:
<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>INSERISCI TESTO QUI</p>
</div></div>

Essendo un passaggio che spesso si dimentica dopo una modifica del post lo ricordo nuovamente: il post dopo l'utilizzo dei codici per nascondere il testo va sempre salvato in modalità HTML.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies