Trovato uno snippet jQuery già pronto per un pulsante «Mostra/Nascondi» che non funziona? Il codice che usa .toggle() è stato scritto seguendo un manuale vecchio di dieci anni e ha smesso di funzionare in silenzio con jQuery 1.9. Per un principiante la situazione sembra magia nera: la console è vuota, nessun errore, il pulsante semplicemente non risponde al secondo clic.

Il problema è che il metodo .toggle() in jQuery ha avuto due vite. La prima, mostrare/nascondere elementi con animazione, è ancora viva. La seconda, alternare azioni al clic, è stata rimossa nel 2013, ma i motori di ricerca continuano a proporre vecchi articoli tra i primi risultati. Qui spieghiamo perché il vecchio codice è morto e scriviamo tre alternative funzionanti, da un semplice flag agli attributi data per una dozzina di pulsanti alla volta.

💡 Panoramica rapida:

• Perché il tuo .toggle(fn1, fn2) non funziona e dove cercare codice deprecato
• Metodo 1: una variabile di stato per un pulsante singolo con codice minimo
• Metodo 2: .data() quando hai molti pulsanti e ognuno vive di vita propria
• Bonus: tre o più azioni in una catena di clic usando un contatore
• Il .toggle() moderno per l'animazione, cosa resta e come usarlo

Cos'è.toggle() in jQuery e perché il vecchio codice è morto

Prima di jQuery 1.8, il metodo .toggle() poteva fare due cose diverse in base agli argomenti passati. Se passavi due funzioni come parametri, funzionava come un toggle: il primo clic eseguiva la prima funzione, il secondo clic la seconda, il terzo clic di nuovo la prima, e così via in ciclo.

Aveva un aspetto compatto:

1
// Worked in jQuery before 1.8, removed in 1.9
2
$('#myButton').toggle(
3
  function() {
4
    $(this).text('Show categories').css('background', 'green');
5
  },
6
  function() {
7
    $(this).text('Hide categories').css('background', 'red');
8
  }
9
);

Esattamente questo codice circola ancora oggi nei blog in lingua russa. Il problema è che con il rilascio di jQuery 1.9 (gennaio 2013), questa forma di .toggle() è stata completamente rimossa. Il motivo: il doppio scopo del metodo creava confusione, e i principianti non capivano perché .toggle() a volte animasse e a volte alternasse azioni.

Oggi .toggle() fa una sola cosa: mostra o nasconde un elemento con animazione. Per alternare azioni, lo sviluppatore deve gestire esplicitamente lo stato.

Metodo 1: variabile di stato

L'approccio più diretto è creare una variabile booleana e invertirla nel gestore .click(). Adatto per un pulsante singolo o elementi con logica di toggle condivisa.

Aggiungi il codice al file degli script del tema (via wp_enqueue_script in functions.php) o in un blocco <script> prima del </body> di chiusura:

1
let isFirstClick = true;
2
 
3
$('#toggleBtn').on('click', function() {
4
  const $btn = $(this);
5
 
6
  if (isFirstClick) {
7
    $btn.text('Hide categories');
8
    $('#contentBlock').show(700);
9
    isFirstClick = false;
10
  } else {
11
    $btn.text('Show categories');
12
    $('#contentBlock').fadeOut('slow');
13
    isFirstClick = true;
14
  }
15
});

Qui isFirstClick conserva lo stato corrente fuori dal gestore. Il primo clic mostra il blocco e imposta il flag a false, il secondo lo nasconde e riporta il flag al valore iniziale. Nessuna magia: sai esattamente quale azione accadrà ora e quale accadrà dopo.

Il vantaggio di questo approccio è che il flag può essere resettato da qualsiasi punto del programma. Per esempio, dopo una richiesta AJAX vuoi riportare il pulsante allo stato iniziale, ti basta usare isFirstClick = true.

Lo svantaggio è una variabile per tutti i pulsanti. Se la pagina ha due toggle indipendenti con la classe .toggleBtn, la variabile isFirstClick sarà condivisa da entrambi. Per questo scenario, usa il metodo 2.

Metodo 2: attributi data di jQuery

Quando hai diversi pulsanti indipendenti (per esempio, ogni prodotto in un catalogo ha il proprio blocco delle specifiche), devi memorizzare lo stato direttamente sull'elemento DOM. Il metodo .data() associa dati arbitrari a un elemento senza inquinare lo scope globale.

Carica lo script allo stesso modo, via wp_enqueue_script o nel footer:

1
$('.toggle-btn').on('click', function() {
2
  const $btn = $(this);
3
  const hasClicked = $btn.data('clicked') || false;
4
 
5
  if (!hasClicked) {
6
    $btn.text('Hide specifications').css('background', '#f0f0f0');
7
    $btn.next('.specs-block').show(400);
8
    $btn.data('clicked', true);
9
  } else {
10
    $btn.text('Show specifications').css('background', '#fff');
11
    $btn.next('.specs-block').fadeOut(300);
12
    $btn.data('clicked', false);
13
  }
14
});

Chiamare $btn.data('clicked') legge lo stato di quel pulsante specifico. Dieci pulsanti sulla pagina significano dieci stati isolati. Nessun conflitto.

Nota: .data() lavora con la memoria di jQuery, non con gli attributi HTML data-*. Se hai bisogno che lo stato sopravviva a un ricaricamento della pagina, scrivi in aggiunta $btn.attr('data-clicked', 'true') e leggi via .attr().

Bonus: tre o più azioni in una catena

E se i clic dovessero essere non due ma tre? Per esempio: prima pressione mostra il blocco, la seconda ne cambia il contenuto, la terza lo nasconde. Qui, invece di un flag booleano, crei un contatore numerico:

1
$('#multiBtn').on('click', function() {
2
  const $btn = $(this);
3
  let count = $btn.data('clickCount') || 0;
4
 
5
  switch (count) {
6
    case 0:
7
      $btn.text('Step 1: show block');
8
      $('#targetBlock').show(500);
9
      break;
10
    case 1:
11
      $btn.text('Step 2: load data');
12
      $('#targetBlock').load('/ajax-content');
13
      break;
14
    case 2:
15
      $btn.text('Step 3: hide');
16
      $('#targetBlock').fadeOut(400);
17
      count = -1; // next click will become case 0 again
18
      break;
19
  }
20
 
21
  $btn.data('clickCount', count + 1);
22
});

Resettare il contatore (count = -1) ha senso se la catena deve essere ciclica. Se l'azione è una tantum, rimuovi semplicemente il reset, e dopo il terzo clic non accadrà più nulla.

Il.toggle() moderno per l'animazione

La forma di .toggle() che è sopravvissuta è strettamente responsabile della visibilità dell'elemento. Senza argomenti, è un toggle istantaneo. Con una durata, anima simultaneamente larghezza, altezza e opacità.

Scenario base: un pulsante «Mostra/Nascondi menu»:

1
$('#menuToggle').on('click', function() {
2
  $('#mainMenu').toggle('slow', function() {
3
    // callback after animation completes
4
    console.log('Animation complete');
5
  });
6
});

Le stringhe 'fast' e 'slow' danno rispettivamente 200 e 600 millisecondi. Puoi passare un numero esatto: .toggle(400) significa 400 ms.

Un trucco utile: forzare lo stato tramite un parametro booleano. .toggle(true) mostra sempre l'elemento, e .toggle(false) lo nasconde sempre. Questo è comodo in combinazione con un flag esterno del metodo 1:

1
let visible = true;
2
$('#toggleBtn').on('click', function() {
3
  visible = !visible;
4
  $('#content').toggle(visible);
5
});

Il codice si legge in modo lineare: il flag viene invertito, l'elemento assume lo stato richiesto. Nessun if/else condizionale intorno alla visibilità.

⁉️🤔 Domande frequenti

Perché il mio vecchio codice con .toggle(fn1, fn2) non mostra errori nella console?

La vecchia forma di .toggle() è stata rimossa a livello di metodo: jQuery semplicemente non trova quella firma e non fa nulla in silenzio. La console è vuota perché chiamare .toggle(fn1, fn2) per jQuery moderno è una chiamata sintatticamente corretta ma priva di significato (gli argomenti vengono ignorati). Controlla la tua versione di jQuery: se è 1.9 o superiore, il vecchio codice è morto.

Posso includere jQuery Migrate e non riscrivere il codice?

Tecnicamente sì. Il plugin jQuery Migrate ripristina i metodi rimossi, incluso il vecchio .toggle(). Ma è una stampella temporanea: Migrate aggiunge circa 10 KB minificati ed è pensato per un periodo di transizione, non per un uso permanente. Se il sito gira su WordPress e jQuery viene caricato dal core, Migrate è già presente per retrocompatibilità. Ma fare affidamento su di esso nel proprio codice non è raccomandato: può essere disabilitato in qualsiasi momento da un aggiornamento del tema o di un plugin.

Cosa è meglio, una variabile o un attributo data?

Per un pulsante singolo, usa una variabile (meno codice). Per diversi pulsanti indipendenti o elementi aggiunti dinamicamente, usa .data() (isolamento dello stato). Se i pulsanti vengono aggiunti via AJAX dopo il caricamento della pagina, usa la delega: $(document).on('click', '.toggle-btn', function() { ... }).

.toggle() funziona sui dispositivi mobili?

Sì. Il .toggle() moderno (animazione) e tutti i gestori di clic di questo articolo funzionano correttamente con gli eventi touch. jQuery normalizza il click per i browser mobili fin dalle sue prime versioni. L'unica sfumatura: su iOS prima della versione 12, gli elementi senza cursor: pointer avevano un clic ritardato, ma questo problema si risolve con una riga CSS touch-action: manipulation per il pulsante.

Dove devo mettere il codice jQuery in WordPress?

Tre opzioni. Veloce: il plugin Code Snippets: inserisci il codice JS in uno snippet di tipo «JavaScript» e viene caricato automaticamente nel footer. Corretto: crea un file js/toggle.js nel tuo child theme, registralo via wp_enqueue_script('my-toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true) in functions.php. Il parametro true alla fine manda lo script nel footer, che è lo standard per il codice che lavora con il DOM. Non mettere <script> direttamente nel corpo dell'articolo; l'editor di WordPress rimuoverà il tag.

Quale approccio scegliere per il tuo progetto

Se hai un pulsante con testo che cambia e visibilità del blocco, usa una variabile di stato. Tre righe, comportamento trasparente, debug banale.

Se ci sono più toggle (catalogo, pannello impostazioni, lista di elementi espandibili), usa solo .data(). Una variabile globale per più pulsanti creerà una race condition sullo stato che debuggerai più a lungo del tempo che ci vuole per scrivere il codice con il metodo 2.

Una catena di tre o più passi richiede un contatore con switch. Non complicare con flag booleani ciò che si adatta naturalmente ai numeri.

Cosa più importante: se trovi un articolo nei risultati di ricerca con .toggle(fn1, fn2), chiudi la scheda. jQuery è vivo, ma quel metodo specifico è stato sepolto nel 2013.

Puoi rinfrescare le tue conoscenze su come eseguire snippet JavaScript al volo nel nostro articolo su come lavorare con gli snippet in Chrome DevTools, che ti sarà utile per testare rapidamente il codice di questo articolo.