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>

[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

Posts relacionados