Anatomy jQuery FAQ Reveal

A simple jQuery script used to reveal answers to frequently asked questions.

by Travis

HTML

<div class="question">
    <h2>Why is the sky blue?</h2>
    <div class="answer">Because it's made of blueberries!</div>
    <a href="#" class="reveal">See Answer...</a>
</div>

<div class="question">
    <h2>Who ya gonna call?</h2>
    <div class="answer">HEMAN! HEMAN! HEMAN!</div>
    <a href="#" class="reveal">See Answer...</a>
</div>

CSS

.question {margin:0px 0px 20px 0px;}
.question h2{font-size:24px;}
.reveal {display:none;}
.answer {}

JavaScript

//$(document).ready(function(){
    $('.answer').hide();
    $('.reveal').show();
//});


$('.reveal').toggle(function(){
    $(this).text('Hide Answer...');
    $(this).parent().find('.answer').show();
}, function() {
    $(this).text('Show Answer...');
    $(this).parent().find('.answer').hide();
});