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

• Come nascondere testo, video e immagini in un post -

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.