Efeito “Sanfona” Accordion

Leo — Sat, 10 Apr 2010 20:04:31 +0000

Olá amigos

Mais uma vez escrevendo aqui sobre jQuery, hoje vou mostrar um efeito bem legal utilizado principalmente para ocultar e/ou exibir blocos de conteúdo, é o chamado efeito Accordion ou efeito Sanfona.

Demonstração
Download dos arquivos

Vamos lá, hora de por a mão na massa, ou melhor, no teclado!!! =D

1º Passo – Estrutura do HTML

Vamos começar montando a estrutura basica do HTML que vai ficar mais ou menos assim:

<div class="geral">
	<div id="accordion">
	  <h3><a href="#">Seção 1</a></h3>
	  <div>
	  	<p>Lorem ipsum dolor sit amet, potenti libero id a vivamus fusce purus, suspendisse grjoida, ac litora, at id nec semper a. Class non cras nec, nec aenean phasellus sodales eu, vulputate urna ullamcorper quisque. Bibendum magna vitae, vulputate posuere hendrerit commodo consectetuer ac, mi ducimus pellentesque massa turpis purus faucibus. Amet vehicula enim curabitur, vitae ac aliquam justo cum, class amet sed laoreet amet, nec ac ullamco eget cursus curabitur arcu.</p>
	  </div>
	  <h3><a href="#">Seção 2</a></h3>
	  <div>
		<p>Tincidunt vestibulum lectus maecenas, quis consectetur odit do, mauris ac semper metus wisi sollicitudin ligula, proin illum urna mattis lorem donec, velit sodales. Dis ut porta, nam nulla justo, dictum purus, sed magnis eu felis donec nec netus.</p>
	  </div>
	  <h3><a href="#">Seção 3</a></h3>
	  <div>
		<p>Maecenas feugiat. Pellentesque tortor morbi, tellus cursus auctor tellus velit eleifend id, at arcu platea suspendisse facilisi, luctus sed lacinia sed magnis non. Eget ac arcu sit. Sem diam quis duis nulla aliquam nec. Condimentum feugiat at ut egestas quam dictum, amet metus duis ridiculus, dolor lectus non metus, viverra hymenaeos, sed quis sit ipsum placerat natoque.</p>
		<ul>
			<li>Um item listado</li>
			<li>Dois itens listados</li>
			<li>Tres itens listados</li>
		</ul>
	  </div>
	  <h3><a href="#">Seção 4</a></h3>
	  <div>
		<p>Sed et, ut quisque condimentum. Erat eu, amet rhoncus risus luctus in eros lorem, massa quis enim amet, ante pellentesque at praesent. Ridiculus amet, justo tellus tristique habitasse, penatibus massa malesuada porttitor integer. Sit mollis ante id sed libero in, sit diam, massa sed pellentesque vitae amet felis porttitor, eu nostra. Dui etiam lectus ac ac, imperdiet leo diam nec luctus. Lacus enim vulputate varius.</p>
	  </div>
	</div>
</div>

2º Passo – Inserindo jQuery

No topo da página acima da tag insira os seguintes códigos:




<script type="text/javascript">
	$(function() {
		$("#accordion").accordion({
			collapsible: true
		});
	});
script>

Este código é responsável por fazer a coisa funcionar, na 1ª linha eu chamo a biblioteca jQuery, perceba que eu estou pegando ela do servidor do Google. Nas 2ª e 3ª linhas eu chamos os arquivos responsáveis pelo efeito, eles estão alocados no servidor do meu site. Da 4ª linha indiante é a função responsável por fazer a coisa funcionar, perceba que eu chamo na função o id “#accordion”, que é o id da div onde esta o conteúdo no qual querodar esse efeito.

3º Passo – Estilo

Vamo dar um pouco de estilo a nossa página com um pouco de CSS, criei um CSS bem simples para que você mesmo possa implementar conforme sua aplicação, segue o códico CSS:

.geral {width:800px; margin:0 auto;}
p {margin:0; padding:0;}
#accordion h3 {background-color:#ccc; margin:0; padding:0; border:1px solid #999; cursor:pointer; height:25px; padding:5px 0 0 10px;}
#accordion h3 a {color:#333; font-size:14px; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}

Código bem simples, onde eu jogo a div com a classe “.geral” em 800px e centralizo na página, zero os atributos “margin” e “padding” dos parágrafos (p), nos títulos (h3) eu coloco uma cor de fundo, bordas e altura de “25px”, na verdade tem 30px por que dou 5px de padding superior (padding-top), o link eu mudo a cor para branco, familia de fonte e retiro o sublinhado com o “text-decoration:none”.

É isso, já esta pronto, qualquer dúvida só deixar um comentário aqui em baixo, ok
Até mais.

L Cardoso » accordion

Efeito “Sanfona” Accordion