Dopo aver capito come selezionare gli elementi in HTML e come aggiunge attributi, in questa lezione vediamo come mostrare e nascondere elementi con jQuery utilizzando i metodi .show(), .hide() e .toggle().
.show() e .hide(). Lo imparerai in questa lezione 😉Il metodo .show()
Il metodo .show() permette di mostrare un elemento selezionato. La sintassi è:
$(selettore).show(tempo, funzione).I parametri tempo e funzione non sono obbligatori. Il parametro tempo indica il tempo in millisecondi dell'animazione per mostrare l'elemento, oppure si può utilizzare "fast" e "slow". Il parametro funzione indica la funzione che deve essere eseguita dopo che l'elemento viene mostrato (non conosci le funzioni? Puoi leggere la lezione JavaScript delle funzioni).
Vediamo un esempio con .show():
<button onclick="mostra()">Mostra il testo</button>
<p id="testo" style="display:none">Un bel testo di esempio</p>
<script>
function mostra(){
$("#testo").show();
}
</script>Nell'esempio, utilizziamo la proprietà onclick per fare in modo di avviare una funzione (chiamata mostra()) al click del pulsante. Se non conosci onclick, puoi leggere la lezione dedicata.
Si utilizza style="display:none" per nascondere un elemento nella pagina, con CSS.
Il metodo .show() con i parametri facoltativi
Abbiamo visto prima che nella sintassi di .show() sono previsti due parametri non obbligatori: il tempo con cui deve essere mostrato l'elemento e la funzione che deve essere eseguita subito dopo. Vediamo un esempio:
<button onclick="mostra()">Mostra il testo</button>
<p id="testo" style="display:none">Un bel testo di esempio</p>
<script>
function mostra(){
$("#testo").show("slow", function(){
alert("Hai mostrato il testo!");
});
// Puoi anche non inserire funzioni:
// $("#testo").show("slow");
}
</script>Nell'esempio, l'elemento viene mostrato lentamente, grazie a slow (si può utilizzare anche un numero, che rappresenta i millisecondi dell'animazione).
Il metodo .hide()
Il metodo .hide() funziona allo stesso modo di .show(), ma nasconde l'elemento invece di mostrarlo.
$(selettore).hide(tempo, funzione).I parametri tempo e funzione non sono obbligatori e rappresentano, come prima, il tempo in millisecondi (ma puoi usare "slow" e "fast") e la funzione che deve essere eseguita successivamente.
<button onclick="nascondi()">Nascondi il testo</button>
<p id="testo">Un bel testo di esempio</p>
<script>
function nascondi(){
$("#testo").hide();
}
</script>Il metodo .hide() con i parametri facoltativi
Anche in .hide() sono previsti gli stessi parametri facoltativi di .show(): il tempo e la funzione, con lo stesso funzionamento di prima. Ecco un esempio:
<button onclick="nascondi()">Nascondi il testo</button>
<p id="testo">Un bel testo di esempio</p>
<script>
function nascondi(){
$("#testo").hide(500, function(){
alert("Hai nascosto il testo");
});
}
</script>Il metodo .toggle()
Il metodo .toggle() unisce entrambi i metodi che abbiamo visto prima. Se l'elemento è visibile, lo nasconde; se l'elemento è nascosto, lo mostra. Ha la stessa sintassi dei metodi precedenti:
$(selettore).toggle(tempo, funzione).I parametri tempo e funzione sono facoltativi e indicano, rispettivamente, il tempo in millisecondi dell'animazione per mostrare o nascondere l'elemento (ma puoi anche utilizzare "fast" e "slow") e la funzione che deve essere eseguita dopo che l'elemento viene mostrato o nascosto.
Vediamo un esempio di .toggle():
<button onclick="cambia()">Mostra/Nascondi il testo</button>
<p id="testo">Un bel testo di esempio</p>
<script>
function cambia(){
$("#testo").toggle(500);
}
</script>