Como criar um FAQ estiloso usando apenas JQuery

Bom, para começar nosso tutorial, você vai precisar inserir na sua página HTML o script do JQuery, eu recomendo usar o caminho que é hospedado pelo Google, assim sua aplicação vai funcionar, sem precisar carregar esse arquivo local.

No link abaixo você vai encontrar todas as bibliotecas disponíveis:
https://developers.google.com/speed/libraries/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Depois disso vamos criar dentro do código HTML, perguntas e respostas que compões o FAQ:

<div class="faq-header">Perguntas Frequentes</div>
<div class="faq-c">
  <div class="faq-q"><span class="faq-t">+</span>Como posso selecionar um elemento pela class ou ID?</div>
  <div class="faq-a">
    <p>Este código seleciona um elemento com um ID de "myDivId". Como os IDs são exclusivos, essa expressão sempre seleciona zero ou um elemento, dependendo do fato de haver ou não um elemento com o ID especificado.</p>
  </div>
</div>
<div class="faq-c">
  <div class="faq-q"><span class="faq-t">+</span>Como faço para selecionar elementos quando já tenho um elemento?</div>
  <div class="faq-a">
    <p>Se você tiver uma variável contendo um elemento e quiser selecionar elementos relacionados a esse elemento, simplesmente envolva-o em um objeto jQuery.</p>
  </div>
</div>
<div class="faq-c">
  <div class="faq-q"><span class="faq-t">+</span>Como faço para testar se um elemento tem uma classe específica?</div>
  <div class="faq-a">
    <p>.hasClass () (adicionado na versão 1.2) lida com este caso de uso comum.</p>
  </div>
</div>

Ok, agora vamos inserir o CSS para dar um estilo ao código e melhorar a interação com o usuário:

.faq-header {
  font-size: 2em;
  border-bottom: 1px dotted #ccc;
  padding: 1em 0;
}

.faq-c {
  border-bottom: 1px dotted #ccc;
  padding: 1em 0;
}

.faq-t {
  line-height: 1em;
  color: #aaa;
  font-family: sans-serif;
  float: left;
  font-weight: 700;
  padding-right: 0.3em;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.faq-o {
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  -ms-transform: rotate(-45deg);
  -ms-transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

E finalmente o código JQuery, para assim manipular o HTML:

<script>
$(".faq-q").click( function () {
  var container = $(this).parents(".faq-c");
  var answer = container.find(".faq-a");
  var trigger = container.find(".faq-t");
  
  answer.slideToggle(200);
  
  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  }
  else {
    trigger.addClass("faq-o");
  }
});
</script>

Este código simples vai adicionar e remover a class “faq-o”, sinalizando se a pergunta deve ser mostrado ou não.

Se quiser fazer o download do arquivo já funcionar basta clicar abaixo:

DEMO

Este artigo é apenas um tradução, mas tudo foi testado, fonte:

JQuery Script