Ocultar / mostrar elementos de JavaScript

1. Use a propriedade style.visibility para ocultar / mostrar os elementos HTML
2. Use a propriedade style.display para ocultar / mostrar os elementos HTML
3. Use hide() / show() da jQuery para ocultar / mostrar os elementos HTML
4. Use jQuery toggle() para ocultar / mostrar elementos HTML
5. Use addClass() / removeClass() para ocultar / mostrar elementos HTML

Freqüentemente nos deparamos com situações em que desejamos alternar entre exibir e ocultar um elemento. Este tutorial apresenta como ocultar / mostrar um elemento em JavaScript.

Use a propriedade style.visibility para ocultar / mostrar os elementos HTML

A propriedade style.visibility, quando definida como oculta, torna o elemento de destino oculto, mas não o remove do fluxo. Portanto, o elemento de destino é renderizado, mas não fica visível. Não afeta o layout e permite que outros elementos ocupem seu espaço natural. Podemos tornar o elemento de destino visível novamente definindo a propriedade de volta para visible.

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

Use a propriedade style.display para ocultar / mostrar os elementos HTML

A propriedade style.display, quando definida como none, remove o elemento de destino do fluxo normal da página e permite que o resto dos elementos ocupem seu espaço. Embora o elemento de destino não seja visível na página, ainda podemos interagir com ele por meio do DOM. Todos os descendentes são afetados e não são exibidos apenas como o elemento pai. Podemos tornar o elemento de destino visível novamente definindo a propriedade para block. É aconselhável definir display como '' porque block adiciona uma margem a um elemento.

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

Use hide() / show() da jQuery para ocultar / mostrar os elementos HTML

O método show() nos ajuda a exibir elementos ocultos por meio do método display:none ou jQuery hide(). Não é possível exibir elementos que tenham sua visibilidade oculta. Ele aceita os três parâmetros a seguir:

1. Speed: especifica a velocidade de retardo do efeito de desvanecimento.
2. Easing: especifica a função de atenuação usada para fazer a transição para um estado visível / oculto. Tem dois valores diferentes: swing e linear.
3. Callback: É uma função executada depois de concluída a execução do método show().

Da mesma forma, o método jQuery hide() ajuda a ocultar os elementos selecionados. Leva os mesmos parâmetros 3 de show().

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

Use jQuery toggle() para ocultar / mostrar elementos HTML

O jQuery toggle() é um método especial que nos permite alternar entre os métodos hide() e show(). Ajuda a tornar visíveis os elementos ocultos e os elementos visíveis ocultos. Ele também usa os mesmos três parâmetros dos métodos hide() e show() do jQuery. Também leva um 4º parâmetro de exibição que ajuda a alternar o efeito ocultar / mostrar. É um parâmetro booleano que, quando definido como falso, oculta o elemento.

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

Use addClass() / removeClass() para ocultar / mostrar elementos HTML

A função addClass() nos ajuda a adicionar uma classe à lista de classes existentes de um elemento, e removeClass() nos ajuda a removê-la. Podemos usar essas funções para alternar ocultar / mostrar escrevendo uma classe personalizada que oculta o elemento e, em seguida, adicionando e removendo-o da lista de classes.

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