Creating a simple FAQ section

on 04-Oct-2009 | Comments ( 6 ) Tags: Evolution

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>

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() {

And here is the result

Click on the headers to slide the answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

liquam ut ipsum risus. Vestibulum metus lectus, mattis imperdiet facilisis et, mollis nec tellus. Quisque id turpis in arcu semper blandit. Integer auctor posuere erat, quis gravida magna venenatis sit amet.

Curabitur nisi justo, vulputate ut semper vel, consequat id turpis?

Nulla ipsum est, vehicula eget sollicitudin eget, vehicula sed magna. Vestibulum iaculis pellentesque tortor, vel venenatis est dignissim vel. Aliquam sed tortor ut felis sodales auctor a vel eros. Vivamus volutpat lacus ut enim sodales vel tempor urna mollis. Morbi sollicitudin viverra dui, ac tincidunt nibh ultricies sed.


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 *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Posts: 4
Re: Creating a simple FAQ section
Reply #6 on : Sun October 04, 2009, 21:13:39
I like the sliding headers.

[FAQ = Frequently ASKED Questions]
Posts: 2
Re: Creating a simple FAQ section
Reply #5 on : Sun October 04, 2009, 21:41:16
Hi jzigbe,

Thx for the correction.
Posts: 4
Re: Creating a simple FAQ section
Reply #4 on : Mon October 19, 2009, 02:08:45
Hey Cipa,

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

Posts: 4
javascript code
Reply #3 on : Thu February 24, 2011, 01:23:21
where to add his code. I couldnot understand!!!
pl help me i want this!!
Posts: 4
Reply #2 on : Thu June 06, 2013, 11:20:54
you would just add the jquery snippet anywhere in the content area of the FAQs doc right?
Posts: 2
Re: Creating a simple FAQ section
Reply #1 on : Thu June 06, 2013, 11:30:47
The Ditto call should be placed in the modx template and the js goes in the your js file or in the template after the jquery call.

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014