Para criar uma página de FAQ interativa com Jquery e CSS é mais fácil do que você imagina. Vamos guiar você por meio do processo, passo a passo, para garantir que sua página seja informativa e envolvente.
1. Adicionando o Script JQuery:
Antes de começar, insira o script JQuery em sua página HTML. Recomendamos usar a versão hospedada pelo Google para evitar o carregamento local. O link completo está disponível aqui. O script abaixo faz referência à versão 3.4.1:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2. Criando Perguntas e Respostas (FAQ):
Agora, dentro do código HTML, insira as perguntas e respostas para compor o FAQ. Um exemplo básico pode ser:
<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>
<!-- Adicione mais perguntas e respostas conforme necessário -->3. Estilizando com CSS:
Para melhorar a interação do usuário, adicione um pouco de estilo ao seu código. O seguinte CSS é um exemplo:
.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;
}
4. Adicionando o Código JQuery:
Finalmente, insira o seguinte código JQuery para manipular o HTML e tornar as perguntas e respostas interativas:
<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>
Conclusão:
Com esses passos simples, você terá uma página de FAQ interativa feita em Jquery e CSS pronta para uso. O código JQuery adiciona uma classe “faq-o” para sinalizar se a pergunta deve ser exibida ou não. Sinta-se à vontade para personalizar conforme necessário.
Este tutorial é uma tradução adaptada de JQuery Script, e todos os passos foram testados.
Este código simples vai adicionar e remover a class “faq-o”, sinalizando se a pergunta deve ser mostrado ou não.
Este artigo é apenas um tradução, mas tudo foi testado, fonte:
JQuery Script
Quer mais dicas de Javascript? Clique aqui
