Pubblicato il 31/08/12e aggiornato il

Come inserire un testo nascosto con il bottone per mostrarlo.

Come mostrare o nascondere del testo mediante l'utilizzo di un pulsante.
L'effetto che vado a presentare serve per nascondere un testo alla prima occhiata dei navigatori con la possibilità di cliccare su un bottone per visualizzarlo nella sua interezza. Si tratta di un codice javascript che può essere inserito in un articolo oppure anche in una colonna. E' utile per rendere più compatto un elemento che altrimenti risulterebbe troppo lungo.

Il codice può essere personalizzato a piacere e possono essere inseriti nel testo anche salti di riga tramite il tag <br/>, link con il tag <a href="#">Testo</a>, grassetto con <b> e </b> e corsivo con <i> e </i>.
Il codice da incollare in modalità HTML in un post o in un gadget HTML/Javascript è il seguente

<div style="margin: 4px 18px 18px; width:500px; text-align:justify;"><div style="margin-bottom: 2px;">Nome Testo: <input value="Mostra / Nascondi" style="margin: 0px; padding: 0px; width: 120px; font-size: 12px;" 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 = 'Nascondi'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Mostra'; }" 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;">Qui va incollato il testo anche formattato con vari tag.<br /></div></div></div>

Gli elementi più importanti da personalizzare li ho colorati di rosso mentre il nome del pulsante è stato colorato di viola e il testo da visualizzare va incollato al posto della espressione colorata di blu. L'effetto che ne riceve il visitatore è il seguente

Lorem Ipsum:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ipsum volutpat sem cursus vestibulum gravida sit amet elit. Integer urna diam, mollis in ultrices ut, pretium scelerisque enim. Mauris posuere ultricies odio, in euismod dui blandit id. Sed quis leo mauris. Phasellus tempor eros id quam convallis laoreet. Proin vulputate scelerisque odio, vitae pretium ante semper ac. Nam rhoncus libero ut purus semper sit amet congue nulla molestie. Nam sit amet est ut libero pretium tristique. Suspendisse laoreet nulla vitae dolor mattis ac venenatis metus pulvinar. Quisque viverra auctor sollicitudin. Phasellus sem purus, facilisis quis dapibus eu, tempus in tellus. Maecenas id lorem et nibh fringilla mattis. Etiam consequat aliquam libero at condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at nisi arcu, eget feugiat urna. Vivamus vel faucibus ante.

Possono anche essere inserite delle immagini o altri oggetti. La larghezza del box è stata scelta in 500 pixel e quella del pulsante in 120 pixel. Per una trattazione più completa di questo argomento vi consiglio di consultare il mio vecchio articolo
La particolarità di questo meccanismo rispetto a quelli già presentati riguarda l'inserimento del testo da nascondere all'interno di un box. Si possono modificare lo stile dei bordo e i codici dei colori.




10 commenti :

  1. Davvero fantastico! Come tutti i tuoi consigli :)
    Buon lavoro

    RispondiElimina
  2. è possibile anche modificarlo il bottone?

    RispondiElimina
    Risposte
    1. @KevinMaggi
      Leggi un po' qui
      http://www.ideepercomputeredinternet.com/2011/01/creare-dei-bottoni-per-il-blog-solo-con.html

      Elimina
  3. Se volessi tenere il box sempre aperto e cliccare solo per chiuderlo cosa devo cambiare nel codice?

    RispondiElimina
    Risposte
    1. @# Qui si gioca con tag style="display:none; che serve per non mostrare un elemento. Si potrebbe fare anche come dici tu però seguendo un altro metodo

      Elimina
  4. Ciao e grazie per questa guida. Quello che vorrei fare io è simile ma non del tutto: è possibile creare una specie di riquadro con un testo dentro e mettere all'inizio o alla fine un pulsante che sostituisca il testo con un altro? Mi interesserebbe molto sapere come fare una cosa del genere

    RispondiElimina
    Risposte
    1. Ci penserò. Salvo il commento. Se mi viene qualche idea ci faccio un post (senza impegno)
      @#

      Elimina
  5. Grazie! :) nella mia idea il testo potrebbe "flippare" girando su se stesso, ovviamente questo è secondario. Senza impegno, certo!

    RispondiElimina
    Risposte
    1. Ho trovato una soluzione che esteticamente non è il massimo ma che può essere personalizzata. Inizio adesso a scrivere il post. Dovrebbe essere pronto tra una mezzora
      @#

      Elimina
  6. Grazie per questa guida, stavo cercando da tempo una cosa del genere.

    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.