Best way to implement FAQ on SharePoint Site

Question

What is the best or common way to implement FAQ page on a SharePoint Site collection?

Answer 1

What we've done in the past:

1. Create a custom list
2. Rename the Title column to Question
3. Add a new Column of type Multi-Line Text and name it Answer
4. Modify the default view to only show those 2 columns and set the style to Newsletter

You end up with something like:

You can then place this on a page using a listview webpart.

Update: I've written this up on my blog with a SharePoint 2010 example here: http://thechriskent.com/2012/03/09/simple-sharepoint-faq-in-5-minutes/

Answer 2

Another possible solution -- using the Preview Pane style option, you can end up with a list of questions in a left hand column and mousing over shows the (selected) fields.

I have Q's with long answers, so I think this may work better in some situations (until it can accordion at an individual record level or on a certain field).

Answer 3

The solution with storing FAQ entries in SharePoint List is recommended. It consists of:

• custom FAQ List Template with Content Type with questions and answers fields
• FAQ List View for rendering as Accordion

Figure 1. FAQ List with Accordion View (SharePoint 2013)

Figure 2. FAQ List with Accordion View (SharePoint 2010)

Implementation

1 Create custom Content Type for FAQ entries

<ContentType ID="0x0100fb1027dc96a44bf280f6cb823a8da5ae"
               Name="FAQ"
               Group="SE"
               Description="FAQ Content Type"
               Inherits="TRUE"
               Version="0">
    <FieldRefs>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Question" Sealed="TRUE"/>
      <FieldRef Name="LinkTitleNoMenu" ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" DisplayName="Question" Sealed="TRUE"/>
      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>
      <FieldRef ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}" Name="Answer"/>
    </FieldRefs>
  </ContentType>

2 Create Client-side rendered view of an FAQ list (for SharePoint 2013)

(function () {
   loadCss('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css');
   function OnAccordionViewPostRender(renderCtx) {

     jQuery(function() {
         jQuery( "#accordionFAQ" ).accordion();
     });

   }



    function loadCss(url){
     var link = document.createElement('link');
     link.href = url;
     link.rel = 'stylesheet';
     document.getElementsByTagName('head')[0].appendChild(link);
   }


   function OnAccordionViewPreRender(renderCtx) {
   }

   function RenderAccordionViewBodyTemplate(renderCtx) {
         var listData = renderCtx.ListData;
         if (renderCtx.Templates.Body == '') {
             return RenderViewTemplate(renderCtx);
         }
         var accordionHtml ='';

         accordionHtml = '<div id="accordionFAQ">';
         for (var idx in listData.Row) {
                var listItem = listData.Row[idx];
                accordionHtml += '<h3>';
                accordionHtml += listItem.Title;
                accordionHtml += '</h3>';
                accordionHtml += '<div>';
                accordionHtml += listItem.Answer;
                accordionHtml += '</div>';
         }

         accordionHtml += '</div>';


         return accordionHtml;
   }


     function _registerAccordionViewTemplate() {

            var accordionViewContext = {};

            //accordionViewContext.BaseViewID = 'Accordion';
            accordionViewContext.Templates = {};
            accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
            accordionViewContext.OnPreRender = OnAccordionViewPreRender;
            accordionViewContext.OnPostRender = OnAccordionViewPostRender;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionViewContext);
        }
        ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');

})();

3 Apply client-side rendering template to existing view via JSLink

Refer the following posts for a details about creating FAQ List:

• Customize the rendering of a List View in SharePoint 2010: Displaying List Items in Accordion
• Customize the rendering of a List View in SharePoint 2013: Displaying List Items in Accordion