Para aprender rapidamente como fazer coisas típicas com jQuery, vamos explicar como mostrar ou ocultar elementos da página, mudando propriedades das folhas de estilo em cascata. Para que este artigo tenha um pouco mais de praticidade, vamos realizar um exemplo de formulário onde alguns dos elementos estão escondidos. Nesse formulário, ao marcar uma opção de um campo checkbox, se mostrarão esses elementos escondidos e ao desmarcar essa opção, se ocultarão.

O método que se dispõem em jQuery para alterar as folhas de estilo se chama css() e podemos invocá-lo sobre elementos da página, aos que queremos mudar suas propriedades CSS. À princípio, para mostrar e ocultar elementos, é bom alterar o atributo "display", colocando o valor "none" para que não apareça e "block" para que sim o faça.

O que deveríamos saber para poder entender este exemplo se pode aprender no Manual de jQuery que viemos publicando em CriarWeb.com. Embora, como este é um exemplo básico, será suficiente com estudar o artigo Passos fundamentais para usar jQuery.

Ocultar e mostrar uma camada com jQuery

Vamos ver brevemente como usar o mencionado método css(). Primeiro, teríamos que ter um elemento na página, que é o que vamos mostrar ou ocultar.

<div id="meuelemento">
Conteudo do elemento...
</div>

Para ocultar este elemento, teríamos que invocar o método css() da seguinte maneira:

$("#meuelemento").css("display", "none");

Como se pode ver, se acessa ao elemento com a função dólar $() e o seletor "#meuelemento". Logo, ao método css() lhe passamos o valor "display" e "none", porque queremos alterar a propriedade display e atribuir-lhe o valor "none", para ocultar o elemento.

Para mostrá-lo faríamos algo parecido, porém, colocando o valor "block" no atributo CSS "display".

$("#meuelemento").css("display", "block");

Mostrar ou ocultar elementos como resposta a um evento

Agora que já sabemos como realizar uma mudança no atributo display, vamos ver como colocar esta instrução em andamento quando o usuário realizar ações na página. Lembrar que no início do artigo comentava que íamos criar um formulário com um campo de seleção (campo checkbox) e que ao ativar esse campo se mostrariam outros conteúdos no formulário. Ao desativá-lo, se ocultariam esses conteúdos do formulário.

Para entender bem o que desejamos fazer, podemos ver o exercício em funcionamento em uma página à parte.

O primeiro que podemos apresentar é o formulário com o qual vamos trabalhar.

<form>
Nome: <input type="text" name="nome">
<br>
<input type="checkbox" name="maior_idade" value="1" id="demaior_idade"> Sou maior de idade
<br>
<div id="formulariomaiores" style="display: none;">
Dado para maiores de idade: <input type="text" name="maiores_idade">
</div>
</form>

Como se poderá ver, é um formulário como outro qualquer. Só que tem uma camada com id="formulariomaiores", que contem os elementos do formulário que queremos mostrar ou ocultar ao marcar ou desmarcar o checkbox. Essa camada estará inicialmente oculta, e para isso colocamos o atributo style="display: none;". Podemos observar também no checkbox com id="demaior_idade", que é o que vai servir para marcar se se deseja ou não ver a parte final do formulário.

Agora há que fazer coisas quando se clica no checkbox com id="demaior_idade". Para isso, deveríamos criar um código Javascript e jQuery como este:

$(document).ready(function(){
   $("#demaior_idade").click(function(){
      //o que se deseja fazer ao receber um clique o checkbox
   });
});

Como já comentamos, estas linhas servem para especificar eventos. $(document).ready() se faz para lançar instruções quando o navegador está preparado para recebê-las e $("#demaior_idade").click() serve para realizar ações quando se clicou sobre o elemento com id "demaior_idade", que é o checkbox do formulário. (Leia o artigo Passos para trabalhar com jQuery para mais informação sobre este ponto).

Agora temos que ver as instruções que devemos executar como resposta a esse evento.

if ($("#demaior_idade").attr("checked")){
   $("#formulariomaiores").css("display", "block");
}else{
   $("#formulariomaiores").css("display", "none");
}

Basicamente, o que fazemos é comprovar o estado do atributo "checked" do elemento "#demaior_idade". Isto se faz com o método attr() indicando como parâmetro o valor do atributo HTML que queremos comprovar. Então, se estava "checked", se tem que mostrar o elemento e se não estava marcado o checkbox, haveria que ocultá-lo.

Espero que se entenda bem. Agora deixo aqui o código completo deste exemplo:

<html>
<head>
   <title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#demaior_idade").click(function(evento){
      if ($("#demaiora_idade").attr("checked")){
         $("#formulariomaiores").css("display", "block");
      }else{
         $("#formulariomaiores").css("display", "none");
      }
   });
});
</script>
</head>

<body>

<form>
Nome: <input type="text" name="nome">
<br>
<input type="checkbox" name="maior_idade" value="1" id="demaior_idade"> Sou maior de idade
<br>
<div id="formulariomaiores" style="display: none;">
Dado para maiores de idade: <input type="text" name="maiores_idade">
</div>
</form>

</body>
</html>

Finalmente, podemos vê-lo em funcionamento em uma página à parte.