Método toggle

O método toggle alterna a exibição/ocultação suave de elementos. Se um elemento estiver visível, ele será ocultado e vice-versa.

Sintaxe

Exibição por um tempo determinado em milissegundos, 400ms por padrão:

.toggle(duração);

O tempo pode ser definido não apenas em milissegundos, mas também com as palavras-chave slow (600ms) e fast (200ms), quanto maior o valor, mais lenta a animação:

.toggle('slow' ou 'fast');

É possível passar o valor true ou false usando o parâmetro display. Se for true, o elemento será apenas exibido, false - ocultado:

.toggle(display);

Se nenhum parâmetro for especificado - não haverá animação, os elementos serão exibidos/ocultados instantaneamente:

.toggle();

Também é possível passar uma função de easing como segundo parâmetro, e um callback como terceiro - será executado após a conclusão da animação. Ambos os parâmetros são opcionais:

.toggle(duração, [função de easing], [função de callback]);

É possível passar apenas uma função de callback como segundo parâmetro opcional - será executada após a conclusão da animação:

.toggle(duração, [função de callback]);

É possível passar várias opções para o método, na forma de um objeto JavaScript, contendo pares chave: valor:

.toggle(opções);

Tal objeto pode conter os seguintes parâmetros e funções - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. A descrição desses parâmetros pode ser consultada para o método animate. Por exemplo, vamos definir a duração e a função de easing:

.toggle( {duration: 800, easing: easeInSine} );

Exemplo

Vamos, após clicar no botão, exibir suavemente um parágrafo oculto usando o método toggle. Passando a palavra-chave slow, definiremos a velocidade para 600ms. Ao clicar novamente - ocultar:

<button>mostrar texto</button>
<p style="display: none">texto</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Veja também

método fadeToggle,
que altera a opacidade dos elementos
método slideToggle,
que alterna a exibição/ocultação suave de elementos
método show,
que exibe elementos suavemente
método hide,
que oculta elementos suavemente