KADUNEW.COM/BLOG

Tutoriais, Dicas e Artigos sobre Web, Design Responsivo, CSS, HTML e Programação web.

Efeito sanfona com jQuery e Accordion

| 10 Comentários

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>

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

10 Comentários

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

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

  3. 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,

  4. Como faço para manter todos fechados?

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

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

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

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

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

Leave a Reply

Campos obrigatórios *.


*