Este post é principalmente para quem gosta do Jquery, mas limita-se somente aos plugins. Existe uma infinidade de opções de Plugins no site do Jquery. Apesar de úteis, eles não são para qualquer situação. Se você quer do seu jeito, faça você mesmo. Em um dos tutoriais do site ensina a fazer parte do que estou fazendo aqui. Mas fiz algumas implementações que mostra várias ferramentas úteis do Jquery. Então ao invés de pegar alguns plugins, com poucas linhas de código irei criar um modelo de faq utilizando as marcações HTML dl, dt e dd. Elas são as mais adequadas para este contexto, pois representam uma lista de definição, com um termo de definição e sua descrição. Com o Jquery vamos fazer aparecer somente os títulos do FAQ, pois caso o usuário se interessem por algum ele irá clicar e assim um slideDown será executado. O design pode ser controlado totalmente por CSS e caso o navegador do usuário não possua Script, o FAQ funcionará normalmente, sem o Javascript é claro.

Vamos ao que interessa!

Chega de falar sobre o FAQ e vamos construir este FAQ com Jquery que tanto eu falo. Vale lembrar que eu usei como FAQ mas ele pode ser usado para outros fins, isto depende de você!

Para começar devemos inserir a framework no head do documento, isto deixo para vocês, pois já mostrei como se faz em outros posts sobre Jquery.

Agora podemos trabalhar com a Framework.

Vamos então ao código Jquery responsável pelo efeito:

$(document).ready(function(){

// Configuração do Menu DropDown

if(!$("#menu dt").children().not(".titulo").is("span")){

$("#menu dt").prepend(" + ")

}

$("#menu").find("dd").hide();

$("#menu").find("dt").toggle(function(){

$(this).next().slideDown("slow");

$(this).find("span").not(".titulo").empty();

$(this).prepend(" - "); }, function() { $(this).next().slideUp("slow"); $(this).find("span").not(".titulo").empty(); $(this).prepend(" + "); }); // Fim da configuração do Drop Down });

Vamos a explicação deste código:

Estrutura condicional:

O que está pedindo para verificar se é falso dentro do if é se o dt dentro do elemento com o id menu(atribuído ao elemento dl) tem um filho que não seja com a classe titulo e que se este filho é um span. Confuso? Traduzindo: Esta seleção retorna se dentro do dt existe um span que não seja da classe titulo. Se não exisitr, ele adiciona este span com o sinal de mais como conteúdo. Sendo assim, inicialmente ele adiciona o sinal de mais dentro de um span através da capacidade de manipulação do conteúdo através do Jquery, deixando assim o código limpo, pois um sinal de mais ou menos caso o javascript esteja desativado, não terá significado algum.

Linha 11

Nesta linha ele chama o método hide para esconder as respostas do faq que estão dentro do elemento dd.

Linha 13

Nesta linha ele chama o método toggle, que tem como parâmetro duas funções: uma para o primeiro click, e outra para quando for clicado novamente.

A função para ser executada no primeiro click seleciona o próximo elemento depois do dt através do método next, que é o elemento dd que estava escondido inicialmente e aplica o método slideDown que faz jus ao nome: deslizar para baixo. A velocidade aceita três parâmentros: “normal”, “slow” e “fast”.

As linhas abaixo selecionam os spans dentro do dt que não estão com a classe titulo(necessário para evitar o apagamento do título do faq) e aplica o método empty, que remove todos o conteúdos filho da seleção onde foi aplicada. Assim ele remove o span com o sinal de mais dentro. Logo após ele adiciona um span com o sinal de menos.

A função para ser executada no segundo clique faz o contrário. Faz o slide ser para cima, além de eliminar o span com o sinal de menos e adiciona o sinal de mais.

Simples não?

13 Replies to “FAQ Dropdown com o Jquery”

  1. Olá ferreira. Eu conhecia este plugin, mas ele funciona realmente como uma “sanfona”, já o que tentei passar aqui funciona mais como dropdown, pois quando vc abre uma ela não fecha outra que estiver aberta. Além disso quis mostrar com este plugin como o Jquery pode manipular o conteúdo e deixar o código limpo, além dos efeitos. Com o plugin o pessoal que está iniciando não aprende muito, fica “mal acostumado”. De qualquer forma, obrigado.

  2. Cara achei bem legal tava precisando fazer um efeito desses no sistema que estou desenvolvendo para o meu tcc! Quando rodo direto no hmtl funciona direitinho mas quando to tentando colocar no meu sistema funciona, mas quando aperto num item ao inves de mudar de + para – ou vice-versa, ele fica concatenando exemplo quando teria que ficar o + no lugar do -, +-, saberia me dizer que erro seria esse
    Ate.
    Marco Souza

  3. E ai Marco, que bom que te ajudou o dropdown. Enquanto ao problema: Este problema está acontecendo em todos os Browsers??? Você está colocando no sistema exatamente como está no tutorial? Você tem outro dt e dd na página? Alguma classe com o nome de titulo??? Muito estranho por que já testei em vários lugares, por estas perguntas fica mais fácil detectar o problea… se precisar estamos aí, abraços…

  4. Olá. Gostei muito do efeito, mas realmente estou tendo o mesmo problema do Marco Souza no IE7. Se eu usar a versão antiga do jQuery (1.1) funciona, mas com a atual que estou usando em meu site (1.2.6), daí dá esse bug, fica enchendo de sinalzinho:
    +-



    Título (quebra a linha ainda).

    Poderia verificar esse erro, para que possamos corrigir e aprender mais? Pois apesar de o tópico ser antigo, achei excelente e bem melhor que o acorddion que é mais pesado e ainda oculta automático o outro.

    Obrigado.

  5. Olá Alexandre!

    Esse exemplo é simplesmente é atemporal e está sendo de grande ajuda para um projeto que necessita desse tipo de funcionalidade e que não agrida a acessbilidade.

    Muito bom mesmo!

    Abraços!

  6. Oie, é o seguinte to começando nessa área e preciso entregar um trabalho nesta área. tem como vc me ajudar, esse email que te mandei é meu msn., aguardo contato.
    obrigado.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *