Pubblicato il 20/04/11e aggiornato il

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













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.




22 commenti :

  1. Complimenti, ottimo articolo e utilissimo. Saluti.

    RispondiElimina
  2. mamma miaaaaaaaaaaaa! era da un anno che cercavo di impararlo da solo! Ormai ci avevo quasi rinunciato! grazieeeeeeeeee :)

    RispondiElimina
  3. Sono informazioni molto utili ma a me servirebbe che quando si clicca sull'immagine
    appaia un box con il contenuto nascosto. Praticamente effetto scroller. E' possibile?
    Saluti Bruno

    RispondiElimina
  4. @Bruno
    Sarà certamente possibile ma adesso non mi viene in mente nulla al riguardo.

    RispondiElimina
  5. Ciao Ernesto!
    Ho trovato ciò che mi serviva ma ti volevo chiedere se erano possibili delle modifiche del genere, mi spiego:
    Ho inserito 3 link (link 1 - link 2 -link 3), corrispondenti a 3 contenuti diversi (contenuto 1 - contenuto 2 - contenuto 3).
    Vorrei che il link 1 con il relativo contenuto, fosse visibile (e quindi non a comparsa), mentre gli altri due vorrei che fossero visibili solo cliccando sul link...
    È possibile farlo?
    Grazie!

    RispondiElimina
    Risposte
    1. @Dalila
      Basta che il primo link lo inserisca normalmente e gli altri due con questo sistema o ancora prima di
      div class="nascosto1
      metti un altro div con relativa chiusura che contenga il link in questione

      Elimina
    2. Il codice non funzionava, ne ho fatto uno io:

      < div id="top" >
      < div id="navigation" >
      < span class="nav">< font onMouseOver="this.style.cursor='pointer'" onClick="document.getElementById('main').innerHTML=document.getElementById('blog').innerHTML">Blog
      < font onMouseOver="this.style.cursor='pointer'" onClick="document.getElementById('main').innerHTML=document.getElementById('profile').innerHTML">Me
      < font onMouseOver="this.style.cursor='pointer'" onClick="document.getElementById('main').innerHTML=document.getElementById('tag').innerHTML">Scrivimi
      < font onMouseOver="this.style.cursor='pointer'" onClick="document.getElementById('main').innerHTML=document.getElementById('misc').innerHTML">Other



      < div id="blog" style="height: 5px; left: 0px; overflow: auto; position: absolute; top: 0px; visibility: hidden; width: 5px;" >
      prova 0
      < div id="profile" style="height: 0px; left: 0px; overflow: auto; position: absolute; top: 0px; visibility: hidden; width: 0px;" >
      prova 1
      < div id="tag" style="height: 0px; left: 0px; overflow: auto; position: absolute; top: 0px; visibility: hidden; width: 0px;">
      prova 2
      < div id="misc" style="height: 0px; left: 0px; overflow: auto; position: absolute; top: 0px; visibility: hidden; width: 0px;">
      prova 3

      Ma il problema è che quando clicco su un link, esso scompare per lasciare il posto al contenuto, mentre io vorrei che i link rimanessero sempre visibili... Sto impazzendo! :(

      Elimina
    3. @Dalila
      Mi sembra il codice di un menù pure con l'effetto del cursore che passa sopra all'elemento. Non mi stupisco non funzioni. Questo hack serve per contenuti semplici come possono essere testo, immagini, link o video.

      Elimina
  6. Ciao! Aiutoooo! Il codice che hai suggerito per mostrare/nascondere non mi funziona per nascondere un gioco flash... come devo fare?
    Grazie!
    Ilaria

    RispondiElimina
    Risposte
    1. @IlariaBijoux
      Non saprei dirti. Ora sono al cellulare e anche volendo non potrei aiutarti. Se con il gioco non funziona non so cosa si potrebbe fare :(

      Elimina
  7. Per prima cosa, grazie infinite per questi codici.
    Ho usato il secondo e va benone.

    A seguire, vorrei portare la mia esperienza per creare una pagina con le faq su un blog blogger.
    Disattivare Adblock su Chrome (Se l'hai impostato). Pare crei scompiglio.
    Prima, scrivere ciò che si vuole sulla pagina (modalità scrivi), correggere la grandezza e il colore del font ecc... , poi passare all'html della pagina e non spostarsi piu' di là, altrimenti si scombina l'html e si cancellano le < p > e uno diventa matto.
    Una volta nella sezione html, aggiungere il codice prescelto, cambiare il testo al suo interno e il gioco è fatto.
    Consiglio anche di copincollare l'html sul blocco note una volta finito. Potrebbe tornare utile.
    Fatto questo, pubblicare la pagina!
    La mia funziona benone e io di ste cose non ci capisco nulla! Ancora grazie e
    Buona giornata a tutti!

    RispondiElimina
    Risposte
    1. Grazie della condivisione della tua esperienza @#

      Elimina
  8. Ciao, io ho utilizzato i codici sul mio blog ma, dopo un po' di tempo non funzionano più. Rimane il tasto "MOSTRA" ma, cliccando sopra non succede nulla.

    RispondiElimina
    Risposte
    1. Questo post è stato scritto 2 anni e mezzo fa e i pulsanti funzionano sempre :)
      Se hanno smesso di funzionare è perché hai riaperto il post per modificarlo. Questo si può fare ma con attenzione. Bisogna per sicurezza reincollare il codice e pubblicare il post da HTML senza passare da Scrivi
      @#

      Elimina
  9. Ciao Ernesto! Ho provato e tutto funziona correttamente. Vorrei solo centrare il pulsante ed il contenuto. Ho fatto un poco di prove ma senza successo. Sicuramente inserisco il tag smagliato. Mi potresti segnalare la porzione di codice da aggiungere per centrare il tutto.? grazie mille!

    RispondiElimina
    Risposte
    1. Prova inserendo < center > all'inizio e < /center > alla fine. Togli però gli spazi dai tag che ho dovuto mettere per salvare il commento
      @#

      Elimina
    2. Grazie Ernesto! Ho provato e funziona! Solo che nel momento in cui decido di modificare il post (ad esempio decido di inserire un link in un secondo momento) il tasto smette di funzionare. E' normale che faccia così. Cioè....posso utilizzare questo sistema per nascondere il testo solo in "post definitivi" quelli cioè che so che non dovrò aggiornare? Grazie ancora

      Elimina
    3. Si tratta di un javascript. Quando modifichi l'articolo ricordati di verificare che lo script sia rimasto invariato e pubblica andando su HTML e non su Scrivi. Meglio comunque evitare di modificare tali post
      @#

      Elimina
  10. È un peccato che il testo nascosto non venga indicizzato per via del display:none. Ho provato a mettere visibility:hidden ma poi rimane lo "spazio" vuoto e bianco grande quanto il testo che si vede cliccando sul bottone.

    RispondiElimina
    Risposte
    1. Il problema è che pensano che sia un modo di barare
      http://seoshrugged.com/2015/11/30/does-google-crawl-css-displaynone-content/
      @#

      Elimina
  11. è possibile fare una cosa simile con altri sistemi viste le difficoltà che poi si riscontra nel modificare tali post? Grazie

    RispondiElimina

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.