Mostrare e nascondere box con jQuery

jQuery libreria javascript

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:

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
	function mostra(){
		$("div#box").css("display","block")
	}
	function nascondi(){
		$("div#box").css("display","none")
	}
</script>
<style type="text/css" media="screen">
#box{
	background-color:#ddd;
	font-family:Arial, Helvetica, sans-serif;
}
</style>
<div id="box">Io sono il box</div>
<a>Mostra</a>
<a>Nascondi</a>


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

<script type="text/javascript" src="jquery-1.4.min.js"></script>

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:

<script type="text/javascript">
	function mostra(){
		$("div#box").css("display","block")
	}
	function nascondi(){
		$("div#box").css("display","none")
	}
</script>

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

$("div#box")

stiamo selezionando il tag div con 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. Mettendo il valore al block l’elemento selezionato da jQuery verrà mostrato.

Mentre con:

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

si assegna alla proprietà display all’elemento il valore none , di fatto nascondendolo.

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