FAQ index sorted by categories

This tutorial features the creation of a Frequently Asked Questions (FAQ) index, based on categories. For example:

Category1 title

  • faq A
  • faq B
  • faq C

Category1 title

  • faq D
  • faq E

Note: For this tutorial, Textpattern 4.07 is required. If you already have 4.07 installed, let’s get started..

Create an FAQ section

Assuming you want to use a separate section for your FAQ, create a new section in the Sections tab with the section name faq, and section title set to FAQ. Then visit the Pages tab and create a new page template by copying the default page and saving it as FAQ.

Enter the FAQ code into your page template

<txp:article limit="999" sort="Category1 desc, Posted asc">
<txp:if_article_category number="1">
<txp:if_first_article>
<h3><txp:category1 title="1" /></h3>
<txp:variable name="first_cat" value='<txp:category1 />' />
<dl>
<txp:else />
<txp:if_variable name="first_cat" value='<txp:category1 />'>
<txp:else />
<txp:if_different>
</dl>
<h3><txp:category1 title="1" /></h3>
<dl>
</txp:if_different>
</txp:if_variable>
</txp:if_first_article>
<txp:else />
<txp:if_different>
</dl>
<h3>Miscellaneous</h3>
<dl>
</txp:if_different>
</txp:if_article_category>
<dt><a href="<txp:permlink />"><txp:title /></a></dt>
<dd><txp:body /></dd>
<txp:if_last_article>
</dl>
</txp:if_last_article>
</txp:article>

This code goes into your FAQ page template, where you want the FAQ’s to display. To understand how it works, see this post in the Textpattern Forum thread, which includes comments, step by step.

Creating FAQ entries

To create a new FAQ entry, do the following:

  1. Write the question as the article title
  2. Write the answer in the article body
  3. Assign a category1 to it. If no category1 is assigned, the FAQ will appear under the “Miscellaneous” heading
  4. Save each article to the FAQ section

Add some jQuery magic

To add toggling to your FAQ, first you need to include jQuery (ships with Textpattern) in your <head> tag like so:

<script type="text/javascript" src="<txp:site_url/>textpattern/jquery.js"></script>

Then, add the following:

<script type="text/javascript">
$(function(){
	$("dd").hide();
	$("dt").click(function(){
		$(this).next().toggle();
		return false;
	});
});
</script>

If you need to use a specific CSS selector, try this instead:

<script type="text/javascript">
$(function(){
	$("#faqs dd").hide();
	$("#faqs dt").click(function(){
		$(this).next().toggle();
		return false;
	});
});
</script>

I suggest you read the forum post, so that the code makes sense!

comments powered by Disqus