06 de May de 2014
Neste tutorial vamos aprender a fazer o efeito Accordion (também conhecido como Sanfona) com jQuery.
Este recurso pode ser usado para exibir conteúdo separado por tópicos (títulos) onde o texto correspondente fica oculto e aparece apenas quando clicamos no tópico. Caso um tópico já aberto seja clicado novamente, o conteúdo é fechado.
Primeiro vamos ao código HTML:
<div class='box'>
<a href='#titulo'>Tópico 1</a>
<div class='box-texto'> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 2</a>
<div class='box-texto'> Tempora, molestiae, at, praesentium sequi enim sapiente.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 3</a>
<div class='box-texto'> Dolore ut quae ratione reiciendis labore veniam ex repudiandae.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 4</a>
<div class='box-texto'> Veniam ex repudiandae veritatis totam quidem similique.</div>
</div>
E o código jQuery comentado:
$(document).ready(function() {
$('.box a').click(function() {
// Sobe todos textos
$('.box-texto').slideUp();
// Se não estiver aberto executa função
if ($(this).attr('class') != 'ativo') {
// Remove classe ativo de todos
$('.box a').removeClass('ativo');
// Insere classe ativo no link clicado
$(this).addClass('ativo');
// Abre o texto
$(this).next().slideDown();
// Se estiver ativo fecha e remove a classe
} else {
//Fecha texto
$(this).next().slideUp();
// Remove classe ativo de todos
$(this).removeClass('ativo');
}
});
});
Pra finalizar, um pequeno estilo CSS que irá deixar todos os textos ocultos:
.box-texto { display: none; }
O código completo ficou assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Accordion com jQuery</title>
<style>
.box-texto { display: none; }
</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.box a').click(function() {
// Sobe todos textos
$('.box-texto').slideUp();
// Se não estiver aberto executa função
if ($(this).attr('class') != 'ativo') {
// Remove classe ativo de todos
$('.box a').removeClass('ativo');
// Insere classe ativo no link clicado
$(this).addClass('ativo');
// Abre o texto
$(this).next().slideDown();
// Se estiver ativo fecha e remove a classe
} else {
//Fecha texto
$(this).next().slideUp();
// Remove classe ativo de todos
$(this).removeClass('ativo');
}
});
});
</script>
</head>
<body>
<div class='box'>
<a href='#titulo'>Tópico 1</a>
<div class='box-texto'> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 2</a>
<div class='box-texto'> Tempora, molestiae, at, praesentium sequi enim sapiente.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 3</a>
<div class='box-texto'> Dolore ut quae ratione reiciendis labore veniam ex repudiandae.</div>
</div>
<div class='box'>
<a href='#titulo'>Tópico 4</a>
<div class='box-texto'> Veniam ex repudiandae veritatis totam quidem similique.</div>
</div>
</body>
</html>
Claro que você deve melhorar o visual adicionando mais estilos CSS, inclusive aproveitando a classe ativo para destacar o título aberto, como inserindo outra cor por exemplo.
Lembre-se também de ter a biblioteca jQuery no seu projeto. Para este exemplo colocamos o arquivo jquery-1.7.2.min.js dentro da pasta js.
Espero que tenha gostado e que seja útil este código. Grande abraço!
Visualizações: 5.419