Pubblicato il 14/06/13e aggiornato il

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.




13 commenti :

  1. c'è qualcosa che non va Ernesto, soprattutto nel secondo codice: quando lo inserisco nel post(e salvo) vedo direttamente sia il bottone che l'immagine da me inserita che dovrebbe essere nascosta.

    P.S. al "/div " finale del secondo codice manca un " > "

    RispondiElimina
  2. Sì grazie. Succede quando si fanno le cose di fretta :)

    RispondiElimina
    Risposte
    1. Prego, figurati.

      Ho provato il codice negli elementi del Layout e funziona perfettamente; quello che però vorrei fare è sfruttare il codice nei post. Provato, riprovato e riprovato ancora, ma non funziona.

      Sono sicuro che agendo sulle varie opzioni dell'HTML del post (cosa che ho fatto) potrebbe anche funzionare. Hai qualche suggerimento da darmi?

      Elimina
    2. @# Per usare solo l'HTML del post senza modificare il modello prova questo sistema
      http://www.ideepercomputeredinternet.com/2011/04/come-nascondere-testo-video-immagini-o.html

      Elimina
    3. ecco, mi hai risolto anche questo problema. GRAZIE !

      Elimina
  3. Certe funzionalità dovrebbero inserirle già di default, evidentemente ci sono dei pro e contro, ci sarà quello che abuserà di testo nascosto e non le inseriscono per questo.

    RispondiElimina
  4. Pero volevo sapere come si fa usando una immagine come + -
    O per chiudere si fa click fori del div sula pagina come si può fare .
    Grazie mille auguri buone feste.

    RispondiElimina
    Risposte
    1. Chiudere con un click esterno è difficile, invece si può usare una immagine a nostra scelta.Leggi qui
      http://www.ideepercomputeredinternet.com/2011/04/come-nascondere-testo-video-immagini-o.html
      @#

      Elimina
  5. Ciao ho usato il tuo codice e funziona bene per testi corti ma quando vado a inserire testi lunghi sembra non riuscire a nascondere tutto; la pagina visualizza lo stesso il testo nascosto da circa metà. Forse sono io che ho sbagliato qualcosa..
    grazie in anticipo per l'aiuto
    Francesco

    RispondiElimina
    Risposte
    1. Dovrebbe nascondere contenuti di ogni dimensione visto che non c'è il parametro lunghezza. Onestamente non so perché non lo faccia. Ho testato proprio ora e nasconde anche centinaia di righe
      @#

      Elimina
  6. Grazie Ernesto per la risposta. Io uso business catalyst, è possibile che ci siano dei comandi nel testo che inserisco che entrano in conflitto con la funzione di "testo nascosto"?

    RispondiElimina
    Risposte
    1. Non conosco quel framework. Però se così fosse potresti risolvere facilmente aggiungendo il codice in un secondo tempo direttamente dall'HTML della pagina web.
      @#

      Elimina
    2. In realtà è quello che ho fatto, ho copiato e incollato il codice nella pagina e ho inserito il testo al posto di "Incollare il codice o il testo piano del contenuto da nascondere". La cosa strana è che se per esempio aumento gli spazi nel testo da nascondere mi varia la quantità di testo che è visibile nonostante il codice per questo ho pensato che ci fosse un limite di righe.
      L'unica cosa che mi viene da pensare è che il testo da nascondere che inserisco contenga a sua volta dei codici che confliggono con il tuo.
      Grazie comunque per l'aiuto.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.