Creating a FAQ list

* decoration

Two Views each displaying a set of FAQ Entry nodes.

Scenario

You wish to display a FAQ list on your website. When a user clicks on a question, the answer will expand.

There exists more than one way to create a FAQ section.

  1. The first method would be to create individual snippets, manually add each of them to a panel page, and then format them as collapsed elements in order to form an accordion (see the section “Adding collapsible content / creating an accordion-style list” for more details).
    1. Advantage: With the help of anchors, you can create direct links to individual snippets, which would be expanded on page load.
    2. Disadvantage: The titles that appear on the page are not pulled from the snippet, but are entered manually via the Panel Page, so regular contributors or editors cannot modify them.
  2. The second method, as exemplified in the image above, is to use the FAQ Entry module and display the entries in a much smaller formatted list using Views. (Example 1example 2)
    1. Advantage: The titles are visually smaller, so they don’t take up as much space on a page. Moreover, since the list is managed through a View, the titles are pulled straight from the FAQ Entry node, so regular contributors and editors can modify them and can also add more entries to the FAQ list.
    2. Disadvantage: You cannot make use of anchors to expand a FAQ Entry node.

The following will explain how to proceed with the second method.

Required modules: uOttawa FAQ

Workflow

Step 1: Create a taxonomy term to categorize your FAQ entries

  1. Navigate to “Structure” > “Taxonomy”.
  2. Beside “FAQ Groups”, click on “add terms”.
  3. Provide a meaningful name that will group your FAQ entries (e.g. “Page Name - FAQ Name”). In the image example above, two separate terms were created for each module.

Step 2: Create the FAQ entries

  1. Navigate to “Content” and, at the top of the page, click on “+ Add Content”.
  2. In the list of options, select “FAQ Entry”.
  3. Fill out the different fields on the page:
    1. Title: This will correspond to a single question title.
    2. Answer: This will be the response to the question in the title.
    3. FAQ Groups: Select the group you created in Step 1 to which it corresponds.
    4. Save the page and repeat this process for every other FAQ question you have.

Step 3: Add the FAQ group to a page using a View

  1. Navigate to “Structure” and then “Pages”.
  2. Find the page where you wish to add the FAQ group and click on “Edit”.
  3. In the left menu, under Variants, click on “Content”.
  4. Your page should have labeled sections, such as “Left” and “Right”. Click on the top-left gear icon of one of these regions and select “Add Content” from the dropdown menu.
  5. A new window should appear. In the left menu, select “View panes” and then click on “View: uOttawa View: Summary and Details”. Then configure the following:
    1. Num items: Set this to “0” to list all FAQ entries with the specified Subqueue title.
    2. Queue machine name: Set this to “faq_group_queue”.
    3. Subqueue title: Insert the name of the taxonomy term you created in Step 1.
    4. Order: Ascending is probably more desirable.
    5. Click on “Finish” once you’re done and then Update and save the entire page.

Step 4: Style the newly added View

  1. Click on the top-right gear icon of the View you just added in Step 3.
  2. In the dropdown list, under Style, click on “Change”.
  3. A popup window should appear. Select “Component Styles” and then click on “Next”.
  4. Configure the following, as needed:
    1. Display Title?: Set this to “Yes” and then enter an English and French title. In the example image above, the title is what you see in black.
    2. Container Type: Set this to “Full” to add the white background box with padding.
    3. Spacing: Add a “Top gutter”, “Left gutter” or both as necessary.
    4. Save your changes, then “Update and save” the entire page.
» Envoyer vos commentaires
    Sujets: 
  • Soutien
    Types: 
  • Tutoriels
Haut de page