Efeito sanfona com jQuery e Accordion
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/
Veja os efeitos prontos…
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.
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.
Veja aqui o efeito final
Com autoheight igual a false
Com autoheight igual a true
Me siga no Twitter: @kadunew
Forte abraço!





Fevereiro 4th, 2010 at 5:55 pm
Kadu,
Muito bacana este efeito sanfona.
Dentro de cada um podemos colocar foto e texto?
e tem como configurar para ao abrir deixar oculto o primeiro texto?
parabéns pelas dicas.
Junho 21st, 2010 at 12:39 pm
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!
Julho 5th, 2010 at 12:17 pm
Olá Bruno tudo bem?
Dê uma olhada nesse link, acho que pode ajudar você.
Abração e orbigado pela visita ao blog.
Julho 8th, 2010 at 4:13 pm
Opa, blz ae pessoal… tive a mesma duvida do Rafae, sobre deixar o primeiro grupo oculto, abra o arquivo jquery.accordion.js, procure pelo texto abaixo e substitua, vai dar certinho!
Procurar:
headers.filter(”:eq(0)”);”
Substituir por:
headers.filter(”:eq(999)”);”
Abraços,
Dezembro 7th, 2010 at 2:36 am
Como faço para manter todos fechados?
Janeiro 26th, 2011 at 11:20 am
gostaria de saber se tem como mudar a setinha q fica a esquerda, tipo colocar ela branca e a direita um pouco maior
Julho 5th, 2011 at 11:44 pm
Boa noite, muito bom o seu tutorial. Será que você pode me ajudar com a seguinte dúvida: Quero que abra normalmente com a primeiro grupo aberto, porém, gostaria de fechar o grupo aberto se clicar no mesmo e não abrir nenhum outro, pois estou clicando somente no aberto. É possível? Obrigado.
Julho 11th, 2011 at 7:18 pm
Olá Eduardo,
No caso de utilizar o ‘exemplo 1′, tem alguma forma de incluir links dentro da div oculta (ou seja, a div de conteúdo)?
Parabéns pelo excelente blog!
Setembro 19th, 2011 at 8:35 pm
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
});
Outubro 21st, 2011 at 8:44 pm
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.