06 de maio de 2014

Accordion com jQuery

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: 1.770



jQuery

27 de agosto de 2013

Galeria com Miniatura jQuery

Neste tutorial vamos aprender a fazer uma Galeria de Imagens com Miniatura jQuery.

21 de agosto de 2013

Plugin jQuery

Neste tutorial vamos aprender como usar um Plugin jQuery. A maioria dos Plugins jQuery seguem a mesma linha de configuração usando requisitos similares, depois que se aprende a configurar um, fica mais fácil entender todos os outros...

Sérgio Toledo | Full-Stack Web Developer | LinkedIn | GitHub | YouTube

Todos os direitos reservados ©