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:
- Write the question as the article title
- Write the answer in the article body
- Assign a category1 to it. If no category1 is assigned, the FAQ will appear under the “Miscellaneous” heading
- 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!
Thanks— I used this javascript snippet in the demo for my latest article about getting semantic with webcomics.
That´s a great Tut!! Thanks a lot for it.
Awesome!!! I’ve puzzled through this type of scenario so often, it’s excellent to have this to refer to so I don’t have to figure it out each time. I use it on writers’ sites to output lists of published articles by category or publication, with titles and excerpts.
You could also add a linked shortcut list to the beginning…
And then for each heading:
Nora, if you have another method or a variation, it might make a good tip in its own right..