Como usar o evento hide e show do jQuery


Neste tutorial será apresentado como usar o evento hide e show do jQuery.

Primeiro será apresentado como usar o evento hide do jQuery, em seguida como usar o evento show no jQuery.

Também será apresentado como usar o evento toggle do jQuery.



Download do código fonte desenvolvido na aula: DOWNLOAD

Primeiro necessário incluir a biblioteca jQuery. Podendo baixar, ou usar de uma CDN.

No exemplo será utilizado da CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Para utilizar o jQuery necessário o $ (cifrão) como atalho. Por isso pode misturar sem problemas JavaScript nativo com jQuery.
$() é utilizado em todas as funções que devem ser referenciadas ao jQuery;
A base do jQuery são os Seletores, um seletor define em que parte do html ou tag vamos executar o nosso código jQuery, os seletores do jQuery são idênticos ao do CSS, exemplo, temos uma div com a seguinte estrutura, a principio podemos selecionar esta div de duas formas no jQuery:

Assim $("div") ou $("#divTeste")

O exemplo citado acima deve ser colocado dentro da TAG <script></script>. Conforme o exemplo abaixo.

Evento hide do jQuery


O evento hide é usado para ocultar conteúdo com jQuery.
No exemplo abaixo é usado o evento click, para chamar o evento hide.
O evento "click" é usado para identificar quando o usuário clica no botão, em seguida é ocultado o conteúdo que está dentro do seletor "#exemplo1", com o hide.

<script>
	$("#ocultar").click(function () {
		$("#exemplo1").hide();
	});
</script>

Em seguida necessário criar o botão com o seletor "#ocultar", também o conteúdo que vai ser ocultado dentro do seletor "#exemplo1".

<button id="ocultar">Ocultar o conteúdo</button>
<p id="exemplo1">Conteúdo que vai ser ocultado</p>

Baixar o exemplo completo.


Evento show do jQuery


O evento show é usado para apresentar conteúdo que está oculto com jQuery.
No exemplo abaixo é usado o evento click, para chamar o evento show.
Primeiro é criado o botão com o seletor "#apresentar".

<button id="apresentar">Apresentar o conteúdo</button>

Em seguida o jQuery responsável em apresentar o conteúdo oculto quando o usuário clica no botão.

<script>
	$("#apresentar").click(function () {
		$("#exemplo1").show();
	});
</script>

Também dá para definir o tempo para ocultar ou apresentar o conteúdo em milissegundo.

$("#apresentar").click(function () {
	$("#exemplo1").hide(1000);
});

Portanto, nesse tutorial é apresentado dois eventos o hide e show, sendo muito simples o uso.