Menu Accordion com JQuery (sem plugin)

Quanto mais estudo mais eu gosto de jQuery, e as possibilidades de uso aumentam a cada leitura. :)

Resolvi aplicar jQuery na base (framework, huh?) que utilizo para as intranets de meus clientes e isso foi responsável por grande parte do meu aprendizado, estou aplicando também na nova versão do And After (resultado do meu TCC sobre usabilidade: análise heurística).

Desenvolvi os wireframes navegáveis do And After para fazer testes de navegação mais próximos do real possível e para isso utilizei menu accordion.

Não gosto de utilizar *muitos* plugins por três motivos principais:

• Aumento do carregamento
• Possível incompatibilidade
• Falta de controle (somente em alguns casos)

 Porém não sejamos xiita, se existe algo pronto, bom, e que não irá atrapalhar o carregamento ou o funcionamento de nada, porque não utilizar? :)

Menu accordion com jQuery

Pouco código, simples e leve.

javascript

$(document).ready(function(){

$(´[rel="cont_autor"]:not(:first)´).hide();

$(´[rel="nav_autor"]´).click(function(){
     $(´[rel="cont_autor"]:visible´).slideUp("normal");
     $(this).next().slideDown("normal");
          return false;
});

});

A primeira linha apenas "dá start" no código, para ele ser carregado quando o documento estiver pronto.

Depois procuro os conteúdos dentro do meu menu (usando o atributo rel="cont_autor"), como vocês podem ver no html ali em baixo. Todos os conteúdos são escondidos, menos o primeiro, que por padrão estará sempre aberto no meu menu.

Quando clicar no item com atributo rel="nav_autor" então escondo todos os conteúdos visíveis utilizando o slideUp e pego o elemento depoisdo navegador (o conteúdo que está logo abaixo) e mostro ele utilizando o slideDown.

html

Últimos artigos do autor
	
		
Item 1
		
Item 1
	
Últimos comentários do autor
	
		
Item 1
		
Item 1
	
Últimas leituras do autor
	
		
Item 1
		
Item 1
	

Nesse caso usei h4 para definir os títulos e linhas de navegação, o correto é utilizar definition list (dl), mas meu objetivo aqui era apenas mostrar o funcionamento do menu independente da estruturação do html.

Simples e funcional, sem carregar nada desnecessário. :)

dicas

• Utilize a Google Ajax Libraries API para carregar o jQuery