About this post

Ironically, this question gets asked a lot, so I thought I would show you how simple and easy it is to create an FAQs page in Umbraco using the Archetype package, in 7 easy steps.

1. Install Archetype if you haven't already.

To install Archetype, go to the developer tab, click on Packages in the menu and in the search bar type in 'Archetype'

Next you want to click on the package that is just called 'Archetype'. It was created by Kevin Giszewski. https://our.umbraco.org/projects/backoffice-extensions/archetype/

Then click on the button titled 'Install package', tick to accept terms and click on install. Once it has installed, click Finish.

2. Create a new custom data type called 'FAQ List Control' using the Archetype Property editor.

Go to Developer Tab, right click on Data Types and choose Create > New data type

Put the name as FAQ List Control

Property editor: Archetype

Enter the following:

Label: FAQ List Control
Alias: faqListControl
Label Template: {{question}}
Properties:

Add one for question
Label: Question
Alias: question
Help Text: Enter the question
DataType: TextArea
Required: Yes

Add another one for answer
Label: Answer
Alias: answer
Help Text: Enter the answer for this question
DataType: Rich Text Editor
Required: Yes

Click on Global Fieldset Options and tick the Start With Add Button checkbox. Then click on close in the bottom right corner.

Finally click on save.

3. Create a template called FAQs

• Click on the Settings tab
• Expand the templates folder
• Right click on the master template and choose create.
• Enter the name FAQs and then press save in the bottom right corner.

4. Create a document type called FAQs

• Right click on document types, choos create.
• Choose the second option 'Document Type without a template'
• Enter the name as FAQs Controls
• Add a tab called FAQs
• Add a property called FAQ List
• Enter a description 'Add the frequently asked questions here'
• Click on Add editor and then click on the Reuse tab
• In the search bar above the Reuse tab, start typing FAQ
• Choose the FAQ List Control
• Click on Submit and then click on Save
• Staying on this page, click on the Templates icon in the top right corner
• Click on Choose default template and choose the FAQs template you created. This will make it the default template for this document type.
• Click save in the bottom right corner.

5. Add this code to the FAQs template to render the FAQs.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Archetype.Models
@{
    Layout = "Master.cshtml";
    List<KeyValuePair<string,string>> faqs = GetFAQsModel();
}
@if(faqs != null && faqs.Count > 0)
{
<div class="container">
    <h2>See our FAQs</h2>
    <div id="accordion">
        @foreach(KeyValuePair<string,string> faq in faqs)
        {
            <h3>@faq.Key</h3>
            <div>
                @Html.Raw(faq.Value)
            </div>
        }
    </div>
</div>
}
@*
    To get this to work, you need to define it in the master template under the last script tag like this:
    @RenderSection("ScriptsBottom", false)
*@
@section ScriptsBottom{
    <!-- find out more about the accordion in jquery-ui here http://api.jqueryui.com/accordion/ -->
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#accordion" ).accordion({
          collapsible: true,
          active: false
        });
      } );
      </script>
}
@*
    I've used a function in the template here so it is easier to take it out and put it into a separate helper class
*@
@functions {
    public List<KeyValuePair<string, string>> GetFAQsModel()
    {
        List<KeyValuePair<string, string>> model = null;
        if(Model.Content.HasProperty("fAQList"))
        {
            model = new List<KeyValuePair<string, string>>();
            ArchetypeModel faqList = Model.Content.GetPropertyValue<ArchetypeModel>("fAQList");
            foreach(ArchetypeFieldsetModel faq in faqList)
            {
                string question = faq.GetValue<string>("question");
                string answer = faq.GetValue<string>("answer");
                model.Add(new KeyValuePair<string, string>(question, answer));
            }
        }           
        return model;
    }
}

NOTE

You will need to reference jQueryUi for this demo to work. You may want to do it differently, but to make this demo work you need to add this to your Master template under the last script tag.

@RenderSection("ScriptsBottom", false)

6. Allow the FAQs template under the home doc type.

• Go to document types
• Click on Home
• In the top right, click on the permissions icon.
• Then click on Add child and choose FAQs
• click on save in the bottom right corner

7. Add the FAQs page under Home in the content section

• Click on Content in the left menu.
• Right click on home, choose Create and then choose FAQs
• Enter the name FAQs
• Click on add an item
• Put in your first question and answer
• Use the plus symbol in the top right to add more questions and answers.
• Click on Save and Publish

All Done

You should be able to go the FAQs page on the front end and see them. Click on the question links and see the answers expand.

You can work on the styling yourself, and move the code into a separate controller and classes. I just wanted to get the basic premise across.