O efeito sanfona é muito utilizado para estruturar conteúdos em vários tópicos. O usuário visualiza apenas o tópico que foi clicado.
Na realização desse efeito vamos utilizar a biblioteca jQuery e um plugin chamado de accordion.
Como instalar o plugin Accordion
Primeiro devemos baixar o plugin no link http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Ao descompactar o arquivo baixado você verá uma pasta denominada jquery-accordion. O Arquivo que vamos utilizar está lá dentro com o nome de jquery.accordion.
Agora vamos chamar o arquivo da biblioteca jQuery e o plugin.
Se ainda não tem o arquivo da biblioteca jQuery baixe no seguinte endereço http://jquery.com/
Marcação HTML
<script type="text/javascript" src="jquery-1.2.6.js"></script><script type="text/javascript" src="jquery-accordion/jquery.accordion.js"></script><strong>Veja a marcação HTML</strong>[source language="html"]<div id="geral"><h1>Efeito sanfona com Accordion</h1><div id="efeito"><a href="#"> Fundamentos sobre CSS</a> <div> <p>ponha aqui o conteúdo...</p> </div> <a href="#"> Fundamentos sobre (X)HTML</a> <div> <p>ponha aqui o conteúdo...</p> </div> <a href="#"> Fundamentos sobre jQuery</a> <div> <p>ponha aqui o conteúdo...</p> </div></div></div> |
Estilização CSS
<style type="text/css">*{margin:0;padding:0;}#geral { background:#CCCCCC; width:500px; margin:0 auto; padding:10px; border:dotted 1px; }#efeito a { border-bottom:groove 1px #000; display:block; font-weight:bold; color:#fff; background:#999; padding:5px 10px; text-decoration:none; }#efeito a:hover{background:#666;}#efeito a.selected{background:#666;}div p {padding:7px 0;}</style> |
E o nosso script para criar o efeito sanfona
<script type="text/javascript">$(function(){ $('#efeito').accordion({ autoheight:false });});</script> |
Na quarta linha podemos utilizar a propriedade false e true para o parâmetro autoheight
true: altura da div é fixa
false: ajusta conforme a quantidade de conteúdo.
true: altura da div é fixa
false: ajusta conforme a quantidade de conteúdo.
Veja aqui o efeito final
Com autoheight igual a false
Com autoheight igual a true
Me siga no Twitter: @kadunew
Forte abraço!
Comentários
6 respostas para “Efeito sanfona com jQuery e Accordion”
Tudo bom kadu?
vc tem algo que possa me ajudar quanto à botões no accordion… não consigo pegar o itemCommand para os botões que estão dentro do accordion do Jquery! Vlw pelo post!
Olá Bruno tudo bem?
Dê uma olhada nesse link, acho que pode ajudar você.
Abração e orbigado pela visita ao blog.
Como faço para manter todos fechados?
gostaria de saber se tem como mudar a setinha q fica a esquerda, tipo colocar ela branca e a direita um pouco maior
Obrigada! Foi útil e bem explicadinho. Só me deparei com 2 probleminhas aí compartilho para caso alguém menos experiente ocmo eu precise:
1)No html, lembre-se de chamar primeiro o jquery, depois o plugin do accordion. Eu não sabia, mas faz diferença!
2) Para exibí-los todos fechados inicialmente trocar no html: $(‘#efeito’).accordion({
autoheight:false
});
por:
$(‘#efeito’).accordion({
autoheight:false,
active: ‘false’,
collapsible: true
});
Boa noite, por questão de segurança, quando desenvolvo um site sempre gosto de testá-lo em praticamente todos os browser. Testei no IE9, e novidade (rs), Não funciona! Alguém sabe uma solução? O problema é que fica tudo aberto e não executa o efeito sanfona.