The following tutorial is a suggestion. It is not the only way to display FAQs in your website, but it is a way to do it using the components provided by the infrastructure.

Pre-requisites

In order to follow the tutorial below, you should first enable 2 Drupal modules: CERN Components and CERN Display Formats. The modules are already installed in the infrastructure (hence to your website) so just navigate to Extend from the admin bar, search for the modules and enable them.

1) Create a Content Type

First of all you need a content type that constitutes the FAQ Content Type.

1. Navigate to Structure > Content Types > New Content Type
2. Give a name to the content type (eg. FAQ)
3. Add some meaningful fields
   1. Question: Text Field
   2. Answer: Text Field

2) Setup a view page to display and filter all your FAQs

It is good to have a page where the site visitors can search for the faqs you will publish. In Drupal terms, this job is done by a view and the final result will look something like the following image (without the colours). To explain the process in a better way, this step will be broken into 2 sub-steps.

 

(a) Setup how each separate FAQ will be rendered in the view

In this step you will setup how each one of the FAQs will be rendered (marked red in the image above)

1. Visit the Manage Display of the FAQ content you have already created (Structure > Content Types > FAQ > Manage Display)
2. In the tabs list on the top of the page, select a display to map (eg. Teaser)
3. At the bottom of the display select to render this display using the FAQ List pattern.Map the fields of the FAQ content type to the ones of the pattern as shown in the documentation of FAQ List.
4. Save the display

(b) Setup the view

Having setup how each node will be displayed in the previous step, its time to setup the view that will gather all FAQs in one page and add search fields. This is done by creating a view.

1. Create a view by navigating in Structure > Views > Add View
2. Fill the initial data of the view
   1. Give a name to the view (eg. "FAQs" or "All FAQs")
   2. Show Content of type FAQ
   3. Create a page with a title and a URL
   4. Save
3. In the view settings:
   1. Select Accordion as Format
   2. Under the format, configure the view to Show Display Suite: Content and select as view mode the display you mapped in step (a). In our case it was Teaser.
   3. Add any other configuration you think is useful. For example sorting criteria, number of results shown in the view etc.
   4. Save the view