pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

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…
Exemplo 1
Exemplo 2

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>

<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!

6 Comentários

  1. 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!

  2. Como faço para manter todos fechados?

  3. gostaria de saber se tem como mudar a setinha q fica a esquerda, tipo colocar ela branca e a direita um pouco maior

  4. 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
    });

  5. 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.

Topo