Olá, hoje vou mostrar um simples script de FAQ com jquery. Com ele você consegue adicionar a quantidade de perguntas necessárias ou até mesmo criar um MENU que ao clicar abre um submenu.
Exemplo
<script type="text/javascript">
<!–
$(function() {
var $h2;
var $answer;
$(‘.answer’).hide();
$(‘#faq h2′).bind(
‘click’,
function()
{
if ($h2 && $h2[0] != this) {
$answer.slideUp();
$h2.removeClass(‘open’);
}
$h2 = $(this);
$answer = $h2.next();
$answer.slideDown();
$h2.addClass(‘open’);
}
)
});
–>
</script>
<!–
$(function() {
var $h2;
var $answer;
$(‘.answer’).hide();
$(‘#faq h2′).bind(
‘click’,
function()
{
if ($h2 && $h2[0] != this) {
$answer.slideUp();
$h2.removeClass(‘open’);
}
$h2 = $(this);
$answer = $h2.next();
$answer.slideDown();
$h2.addClass(‘open’);
}
)
});
–>
</script>
<div id="faq">
<ul id="faqs">
<li>
<h2>Pergunta?</h2>
<div class="answer">
<p> Resposta </p>
</div>
</li>
<li>
<h2>Pergunta?</h2>
<div class="answer">
<p> Resposta </p>
</div>
</li>
</ul>
</div>
Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.