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.