Appunti Javascript: i div magici che scompaiono

Altro appuntino facile facile per realizzare un trucchetto che può tornare utile senza bisogno di andarsi a cercare librerie aggiuntive. In un’applicazioncina che sto scrivendo mi serve un help contestuale in presenza di alcune parole chiave, e tra i tanti metodi che ho vagliato il quello che mi è sembrato meglio è riportare l’help dentro un div direttamente sotto la parola; questo div normalmente non è visibile, ma appare se clicco sulla suddetta parola (e scompare se clicco un’altra volta). Il meccanismo è semplice:

1) Una funzioncina javascript da mettere in cima al body della pagina:

<script type="text/javascript">
function toggleDiv(divid){
 if(document.getElementById(divid).style.display == 'none'){
 document.getElementById(divid).style.display = 'block';
 }else{
 document.getElementById(divid).style.display = 'none';
 }
 }
</script>

La funzione riceve il nome di un div nella pagina, ne valuta il parametro “display” (che definisce se il div è visibile “block” o invisibile “none”) e ne cambia il valore.

2) Un div (ovviamente🙂 ):

<div id="aiuto"> Un aiutino: sii deciso e usa parole inventate fingendoti esperto. </div>

3) Un link nella pagina:

<!-- pagina -->
La funzione del giorno è: <a href="togglediv('aiuto')">Foniuglia  e Lordizzazione IRPEF</a>

Ecco fatto, dovrebbe funzionare.

PS: quanto esposto sopra va benissimo per progetti semplici o paginette php singole.. per un progetto più strutturato, come evidenziato precedentemente dall’illustre collega Frasten, conviene appoggiarsi a una libreria ben fatta come jQuery. Qui potete trovare un tutorial di come fare quanto descritto sopra con jQuery.

Questa voce è stata pubblicata in Uncategorized e contrassegnata con , , , . Contrassegna il permalink.

2 risposte a Appunti Javascript: i div magici che scompaiono

  1. antonio ha detto:

    c’è un errore :
    Foniuglia e Lordizzazione IRPEF
    deve essere :
    +

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...