Creating a simple FAQ section

Although there are many ways to build a "Frequently Asked Questions" in modx, I usually use this one as it is simple and can be used for other types of content.

Preparing for the FAQ section:

1. Create your "questions and answers" container. I named mine FAQs. Please assign a template of your choice. Later we'll add a snippet call in the content area of the document.

2. Create an template called FAQ. Leave the Template Code area empty.

Create the FAQs

1. In your FAQ container start entering your FAQs.

Note: I only filled the Page Title and the Content Resource area

Displaying the questions

I will use Ditto for displaying the FAQs

1. Create a new chunk faqsTpl. This will be the template used by Ditto.

<div class="faq">
    <h3 class="question">[+pagetitle+]</h3>
    <div class="answer">[+content+]</div>
</div>

2. Make the Ditto call

[[Ditto? &parents=`20` &depth=`1` &display=`all` &sortBy=`menuindex` &sortDir=`ASC` &tpl=`faqsTpl`]]

3. Insert your ditto call in your FAQs document

Note: If your FAQ container has it's own template paste the Ditto call in the template. Otherwise paste the Ditto call in the Resource Content area. To avoid any validation errors go into HTML view and wrap the Ditto call in <div></div> tags.

Add some java-script

Now it's time to make the questions open and close. Because this website uses jQuery I use the code below to create a nice sliding effect.

$(document).ready(function () {
    $('h3.question').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
});

And here is the result

Click on the headers to slide the answer

There are other FAQ solution out there. Just have a look in the modx repository.

You can also use this technique for other sections of your website. Eg: Services.

Write a comment

• Required fields are marked with *.

Name:
Email:
Subject:
Comment: *

Help prevent spam - enter security code above:
 

jzigbe
Posts: 2

Re: Creating a simple FAQ section
Reply #3 on : Sun October 04, 2009, 22:13:39

---

I like the sliding headers.

[FAQ = Frequently ASKED Questions]

cipa
Posts: 1

Re: Creating a simple FAQ section
Reply #2 on : Sun October 04, 2009, 22:41:16

---

Hi jzigbe,

Thx for the correction.

sharkbait
Posts: 2

Re: Creating a simple FAQ section
Reply #1 on : Mon October 19, 2009, 03:08:45

---

Hey Cipa,

nice! - this FAQ solution is really great and absolutely straight forward!

jan