FAQ¶
Availability: All contexts
The faq module is designed to display a series of questions and answers in an accordion format, providing an efficient way to present structured information. It uses <h-accordion> and <h-accordion-group> web components for its functionality.
Configuration parameters¶
addHeader¶
int If set to 1 the header will be displayed.
headerContent¶
string Text content of a header.
headerLevel¶
string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header module:
h2h3h4h5h6
shouldDisplayUnderline¶
int If set to 1 the header underline will be displayed.
addDescription¶
int If set to 1 the description will be displayed.
description¶
string Text content of a description.
descriptionPlacement¶
string either above or below. Depending on the chosen placement, description will be displayed below or above the header
displayMethod¶
Either single or many. If set to single, only one question accordion can be expanded at a time.
expandFirstQuestion¶
int If set to 1 the first question will be expanded by default.
numberQuestions¶
int If set to 1 the module will automatically number the questions.
question¶
string Text content of a single question inside questionsRepeater.
answer¶
string Text content of a single answer inside questionsRepeater.
classNames¶
string (optional) A list of additional classes that will be added to the faq element. For example "class-1 class-2".
Module source code¶
{% from "@macros/header.twig" import header %}
{% from "@macros/icon.twig" import icon %}
{% set headerLevel = "h" ~ moduleConfig.headerLevel %}
{% set descendantHeaderLevel = (moduleConfig.headerLevel|number_format + 1) %}
<section class="faq {% if moduleConfig.classNames %} {{ moduleConfig.classNames|join(' ') }}{% endif %}">
<div class="faq__heading">
{% if moduleConfig.description and moduleConfig.descriptionPlacement == 'above' %}
<p class="faq__heading-description">{{ moduleConfig.description }}</p>
{% endif %}
{% if moduleConfig.headerContent and moduleConfig.headerLevel %}
{{
header({
level: headerLevel,
content: moduleConfig.headerContent,
hasUnderline: moduleConfig.shouldDisplayUnderline == 1,
classNames: "faq__heading-title"
})
}}
{% endif %}
{% if moduleConfig.description and moduleConfig.descriptionPlacement == 'below' %}
<p class="faq__heading-description">{{ moduleConfig.description }}</p>
{% endif %}
</div>
<div class="faq__content">
<h-accordion {% if moduleConfig.displayMethod == 'single' %}mode="single"{% endif %}>
{% for faqItem in moduleConfig.questionsRepeater %}
{% if faqItem.active %}
<h-accordion-group class="faq__item" {% if moduleConfig.expandFirstQuestion and loop.index == 1%}opened{% endif %}>
<h-accordion-toggler class="faq__item-question accordion__toggler">
{% if moduleConfig.headerLevel|number_format < 6 %}
<h{{ descendantHeaderLevel }} class="faq__item-question-header">
{% if moduleConfig.numberQuestions and faqItem.values.question %}
<span class="faq__item-question-number">{{ loop.index }}.</span>
{% endif %}
{{ faqItem.values.question }}
</h{{ descendantHeaderLevel }}>
{% else %}
<div class="faq__item-question-header" role="heading" aria-level="{{ descendantHeaderLevel }}">
{% if moduleConfig.numberQuestions and faqItem.values.question %}
<span class="faq__item-question-number">{{ loop.index }}.</span>
{% endif %}
{{ faqItem.values.question }}
</div>
{% endif %}
{{ icon('icon-chevron-down', {
size: 'l',
classNames: 'faq__item-question-icon_expanded accordion__toggler-icon',
ariaHidden: 'true'
}) }}
{{ icon('icon-chevron-up', {
size: 'l',
classNames: 'faq__item-question-icon_collapsed accordion__toggler-icon',
ariaHidden: 'true'
}) }}
</h-accordion-toggler>
<h-accordion-content class="faq__item-answer">
{{ faqItem.values.answer }}
</h-accordion-content>
</h-accordion-group>
{% endif %}
{% endfor %}
</h-accordion>
</div>
</section>
Macros reference¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "checkbox",
"name": "addHeader",
"label": "Display heading",
"defaultValue": 1,
"children": [
{
"type": "text",
"name": "headerContent",
"label": "Module heading content",
"defaultValue": "Frequently Asked Questions",
"supportsTranslations": 1,
"relations": [
{
"parentName": "addHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "headerLevel",
"label": "Heading level",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"defaultValue": "2",
"isRequired": true,
"options": {
"isWithSearch": 0,
"selectOptions": [
{
"key": "2",
"label": "H2"
},
{
"key": "3",
"label": "H3"
},
{
"key": "4",
"label": "H4"
},
{
"key": "5",
"label": "H5"
},
{
"key": "6",
"label": "H6"
}
]
},
"relations": [
{
"parentName": "addHeader",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setOptional"]
}
]
}
]
},
{
"type": "checkbox",
"name": "shouldDisplayUnderline",
"label": "Add underline below the heading",
"defaultValue": 1
}
]
},
{
"type": "checkbox",
"name": "addDescription",
"label": "Display additional description",
"defaultValue": 0,
"children": [
{
"type": "textarea",
"name": "description",
"label": "Description",
"supportsTranslations": true,
"relations": [
{
"parentName": "addDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "select",
"name": "descriptionPlacement",
"label": "Description position",
"defaultValue": "below",
"options": {
"selectOptions": [
{
"key": "above",
"label": "above heading"
},
{
"key": "below",
"label": "below heading"
}
]
},
"relations": [
{
"parentName": "addDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
},
{
"type": "radio",
"name": "displayMethod",
"label": "Question display mode",
"defaultValue": "single",
"options": {
"radioOptions": [
{
"key": "single",
"label": "only one question expanded (accordion)",
"labelDescription": "collapses previous question to expand next one"
},
{
"key": "many",
"label": "multiple questions expanded simultaneously"
}
]
}
},
{
"type": "checkbox",
"name": "expandFirstQuestion",
"label": "Expand first question",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "numberQuestions",
"label": "Show question numbers",
"defaultValue": 1
}
]
},
{
"state": "unfolded",
"label": "Questions and answers",
"elements": [
{
"type": "repeater",
"name": "questionsRepeater",
"label": "Manage questions",
"labelDescription": "Min. 1",
"supportsTranslations": true,
"isRequired": true,
"options": {
"minActiveGroups": 1,
"maxActiveGroups": 10,
"defaultGroupLabel": "Question",
"elements": [
{
"type": "textarea",
"name": "question",
"label": "Question",
"isRequired": true
},
{
"type": "textarea",
"name": "answer",
"label": "Answer",
"isRequired": true
}
]
}
}
]
},
{
"state": "unfolded",
"label": "CSS",
"elements": [
{
"type": "text",
"name": "classNames",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]