Fala pessoal, tudo bom? Nesse artigo pretendo mostrar como é simples manipular os elementos da página com JQuery. Vamos ver como mostrar e ocultar informações, deixando armazenada a preferência do usuário, utilizando cookies.

Veja o exemplo em funcionamento

1. Estrutura (index.html)

Primeiramente vamos montar a estrutura da página:

Nesse exemplo usei conteúdos estáticos, porém você poderia selecioná-los de um banco de dados, desde que respeite a hierarquia dos elementos.

2. JQuery

Antes de continuar, baixe a ultima versão biblioteca do jQuery. Também será necessário baixar o plugin para manipulação de cookies.

Agora vamos incluir os scripts em nossa estrutura, entre as tags <head></head> de preferência:

Pronto, agora sim podemos criar nosso script. Primeiramente iremos criar o evento para ocultar e mostrar as caixas:

Vamos a análise:

  • Linha 6: quando clicado em uma imagem (img) que está contida em uma div com classe igual a box (div.box)
  • Linha 8: armazenamos em uma variável o ID da DIV onde se encontra a imagem, para isso utilizamos o parent() que seleciona o elemento pai e depois utilizamos attr() que recupera o valor da propriedade ID.
  • Linha 10: selecionamos as informações que estão no parágrafo com classe igual a conteudo (p.conteudo) que está dentro da box com ID recuperado anteriormente.
  • Linha 12: escondemos ou exibimos (dependendo do estado do elemento) o conteúdo do box, através do método slideToggle(), quando terminado a animação é chamada uma função.
  • Linha 14: verificamos se o box está visível, para isso utilizamos o método css() para recuperar o valor da propriedade display.
  • Linha 16: se estiver visível, setamos um cookie, damos a ele o nome do ID da box e colocamos 1 como valor. O cookie irá expirar apenas em 365 dias.
  • Linha 18, 19: caso o box esteja oculto, também setamos um cookie, porém com valor 0.

Bom, os cookie já estão sendo setados, porém quando o usuário atualizar a página, não há nenhum tipo de verificação para ocultar ou mostrar os elementos de acordo com a preferência do usuário, portanto vamos criar essa função, logo após a função anterior:

Análise:

  • Linha 2: percorremos a página (body), através do each() buscando cada div com classe igual a box (div.box).
  • Linha 4, 6: recuperamos e armazenamos o ID e o conteúdo do box.
  • Linha 8, 10: se o cookie com o nome do ID do box estiver nulo (null), ou seja, ainda não foi setado, escondemos o elemento.
  • Linha 12, 14: se o cookie com o nome do ID do box estiver com valor 1, ou seja, o usuário escolheu que ele ficasse visível, exibimos ele.
  • Linha 16, 18: se o cookie com o nome do ID do box estiver com valor 0, ou seja, o usuário escolheu que ele ficasse oculto, ocultamos ele.

3. Conclusão

Podemos perceber que com JQuery é muito simples manipular qualquer elemento de nossa página e com o plugin de cookies também fica simples a manipulação de cookies.

Download dos arquivos

Por hoje é isso pessoal, espero que vocês tenham entendido.
Abraços.