Mostrare e nascondere box con jQuery

Ecco un breve esempio su come si possono creare 2 funzioni javascript che tramite jQuery mostrano o nascondono un box.

Prendiamo ad esempio questo codice:





Hide/Show box con Jquery






Io sono il box
Mostra Nascondi

Innanzi tutto è necessario includere la libreria jQuery, per fare questo abbiamo utilizzato la riga di codice:

E abbiamo posto il file jquery-1.4.min.js nella stessa cartella di file HTML.

Successivamente abbiamo creato 2 funzioni javascript mostra e nascondi tramite il seguente codice:

Andiamo a vedere un po’ più nel dettaglio come operano queste funzioni. Scrivendo:

$("div#box")

stiamo accedendo al tag div che ha id box.
Successivamenente scrivendo:

$("div#box").css("display","block")

stiamo dicendo che del tag in questione stiamo modificando la proprietà display assegnandogli il valore block.

Come si può notare c’è un discreto risparmio di codice rispetto al javascript classico:

function mostra(){
        elem=document.getElementById("box")
        elem.style.display="block"
}

Tutto il codice può essere scaricato da qui:
jquery Hide Show