Search the blog
I have since written an open source plugin for this called simpleSlidingPanels

This is a really, really simple JQuery script to allow you to have sliding FAQs on your website. This is a great approach if you have loads of content on the page as the visitor only views one answer at a time.

And here’s the source code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple JQuery Sliding FAQs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<style media="all">

span {

    display: block;
    float: left;
    width: 35px;

}

div.faq, div.answer { width: 600px; }

/* This prevents JQuery's slidedown jerky bug */
h2 { margin: 0px; }

</style>
<script>

$(function() {

    $('div.answer').hide();

    $('a.question').before('<span class="faqplusminus">[+]</span>');

    $('a.question').click(function() {

        $('div.answer').slideUp('slow', 'easeInOutExpo');

        $('span.faqplusminus').html('[+]');

        var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);

        if(!slidedownelement.is(':visible')) {

            slidedownelement.slideDown('slow', 'easeInOutExpo');
            slidedownelement.parent().find('span.faqplusminus').html('[-]');

        }

    });

});

</script>
</head>
<body>
<p>Click on a question reveal the answer.</p>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 1 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 2 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
<br />
<div class="faq">
<h2><a class="question" href="javascript:void(0);">Does the name for question 3 go here?</a></h2>
<div class="answer">
<p>Yes. Latine tritani pri at, reformidans voluptatibus ei mei, ne equidem vituperata vel. Te dicta epicurei reprehendunt eum.
Ad eum sale salutandi, te mea ferri malorum neglegentur. Ad epicuri mentitum vim, an etiam noluisse duo. An per natum ferri
impetus.</p>
</div>
</div>
</body>
</html>

So, how does it work?

First, we hide all the answers.

$('div.answer').hide();

Then we add a +/i icon. You can change this for an image icon if you like.

$('a.question').before('<span>[+]</span>');

When a question link is clicked we first set all answers to slide up and change to [+].

$('div.answer').slideUp('slow', 'easeInOutExpo'); 
$('span.faqplusminus').html('[+]');

We immediately find the active answer element.

var slidedownelement = $(this).closest('div.faq').find('div.answer').eq(0);

Then we slide it down and change it to [-]. This cancels out the slideup() called earlier.

if(!slidedownelement.is(':visible')) {
 
    slidedownelement.slideDown('slow', 'easeInOutExpo');
    slidedownelement.parent().find('span.faqplusminus').html('[-]'); 

}

We call !slidedownelement.is(':visible') so that if the answer is already visible, nothing happens.

To create FAQs simply use this template for each one:

<div class="faq">
    <h2><a class="question" href="javascript:void(0);">Question</a></h2>
    <div class="answer"> <p>Answer.</p> </div>
</div>
You don’t have to use h2 tags but the anchors do need parent elements.
This script degrades great with no JavaScript as the visitor can see it as a normal page of text.
Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.