JavaScript Nascondi/Mostra elementi

1. Usa la proprietà style.visibility per nascondere/mostrare gli elementi HTML
2. Usa la proprietà style.display per nascondere/mostrare gli elementi HTML
3. Usa hide() / show() di jQuery per nascondere/mostrare gli elementi HTML
4. Usa jQuery toggle() per nascondere/mostrare elementi HTML
5. Usa addClass()/removeClass() per nascondere/mostrare gli elementi HTML

Spesso ci imbattiamo in situazioni in cui vogliamo alternare tra visualizzare e nascondere un elemento. Questo tutorial introduce come nascondere/mostrare un elemento in JavaScript.

Usa la proprietà style.visibility per nascondere/mostrare gli elementi HTML

La proprietà style.visibility, se impostata su hidden, rende nascosto l’elemento target, ma non lo rimuove dal flusso. Quindi, l’elemento di destinazione viene visualizzato ma non visibile. Non influisce sul layout e consente ad altri elementi di occupare il loro spazio naturale. Possiamo rendere nuovamente visibile l’elemento target reimpostando la proprietà su visibile.

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

Usa la proprietà style.display per nascondere/mostrare gli elementi HTML

La proprietà style.display, se impostata su none, rimuove l’elemento di destinazione dal normale flusso della pagina e consente al resto degli elementi di occupare il suo spazio. Sebbene l’elemento target non sia visibile sulla pagina, possiamo comunque interagire con esso tramite DOM. Tutti i discendenti sono interessati e non vengono visualizzati proprio come l’elemento padre. Possiamo rendere nuovamente visibile l’elemento target impostando la proprietà su block. Si consiglia di impostare display come '' perché block aggiunge un margine a un elemento.

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

Usa hide() / show() di jQuery per nascondere/mostrare gli elementi HTML

Il metodo show() ci aiuta a visualizzare gli elementi nascosti tramite il metodo display:none o jQuery hide(). Non è in grado di visualizzare elementi la cui visibilità è nascosta. Accetta i seguenti tre parametri:

1. Speed: Specifica la velocità di ritardo dell’effetto di dissolvenza.
2. Easing: Specifica la funzione di easing utilizzata per passare allo stato visibile/nascosto. Prende due valori diversi: swing e linear.
3. Callback: è una funzione eseguita al termine dell’esecuzione del metodo show().

Allo stesso modo, il metodo jQuery hide() aiuta a nascondere gli elementi selezionati. Richiede gli stessi parametri 3 di show().

$('#element').hide();  // hide
$('#element').show();  // show

Usa jQuery toggle() per nascondere/mostrare elementi HTML

Il jQuery toggle() è un metodo speciale che ci permette di alternare tra il metodo hide() e show(). Aiuta a rendere visibili gli elementi nascosti e gli elementi visibili nascosti. Prende anche gli stessi tre parametri dei metodi hide() e show() di jQuery. Richiede anche un quarto parametro di visualizzazione che aiuta a alternare l’effetto Nascondi/Mostra. È un parametro booleano che, se impostato su false, nasconde l’elemento.

$('div.d1').toggle(500, swing);  // toggle hide and show

Usa addClass()/removeClass() per nascondere/mostrare gli elementi HTML

La funzione addClass() ci aiuta ad aggiungere una classe all’elenco di classi esistente di un elemento e removeClass() ci aiuta a rimuoverla. Possiamo usare queste funzioni per attivare/disattivare Nascondi/Mostra scrivendo una classe personalizzata che nasconde l’elemento e quindi aggiungendolo e rimuovendolo dall’elenco delle classi.

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show