Nascondere o visualizzare una riga di testo con Javascript

Poter nascondere una porzione di testo è molto utile nel caso in cui si voglia inserire una descrizione di un contenuto nella pagina web. Rendendo il testo nascosto si ha la possibilità di ottimizzare lo spazio senza privare la pagina di alcun contenuto poichè con un semplice clic sul link il testo tornerà nuovamente visibile.

Per fare questo si ha bisogno solo di un pò di javascript e css.

Innanzitutto bisogna creare un nuovo file con estensione .js in cui verrà inserito il codice javascript che servirà a far visualizzare il testo nascosto, in questo caso ‘vediTesto.js’.

function vediTesto(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

Ora che è stato creato il file ‘vediTesto.js’ lo si deve inserire tra i tag head del documento principale in questo modo:

<script type="text/javascript" src="vediTesto.js"></script>

A questo punto non serve altro che scrivere il testo nel documento:

<p><a href="#" onclick="return vediTesto('paragrafo1')">Visualizza il testo nascosto</a></p>
<p id="paragrafo1" style="display:none">
Questa è una riga di testo nascosta.
</p>

In questo modo quando si cliccherà sul link, il testo che contiene l’attributo ‘display:none’ verrà reso visibile, ecco un esempio .

Popularity: 9% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback