Add to Google Reader or Homepage

domenica 27 luglio 2008


Menù

Home
Html & XHtml
Css
Javascript
Php
Motori di ricerca
Contatti

Login Form






Password dimenticata?
Nessun account? Registrati
Home arrow Javascript arrow Dynamic Html arrow Nascondere o visualizzare una riga di testo con Javascript

Nascondere o visualizzare una riga di testo con Javascript Stampa E-mail
Scritto da Vincenzo   
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 .

 
< Prec.   Pros. >


Feed Rss


Corso Javascript e DHTML
Guida completa allo scripting lato client. Corso con tutor ed attestato finale!