- Taxonomic name: O-FAQ-PANEL--RIGHT
- Extension: ADDITIONAL-HELP
- Added on: v3.3.0 (27/04/18)
- Updated on: v5.10.0 (10/08/21)
FAQ panel right
FAQ panels are designed to display between two and five frequently asked questions for easy reference. This variant is designed for use within the right hand side column for Quote and Buy journeys only; all other instances should use the standard variant.
Design and usage
Placement
- Within the right hand side column for Quote and Buy journeys only; all other instances should use the standard variant - see standard Frequently Asked Questions documentation page for information on this variant.
- Desktop - right column.
- Tablet / Mobile - stacks beneath main content.
Structure
- Pattern allows up to 5 questions to be presented and a minimum of 2.
- Each question title is shown as an accordion, with a chevron followed by an expanding link, which is standard size/weight. The link copy is the question.
- By default, all accordions are closed.
- As an accordion, only one answer is visible at any one time.
-
Total width of molecule is fixed:
- Desktop – 4 columns
- Tablet – 8 columns
- Mobile – full width
-
If frequently asked questions are used with other right-hand content:
- On desktop, a key line separates the elements
- On tablet, there is an additional key line shown below the for-submission buttons and above the first component in the right-hand column
-
Question can only wrap to:
- Up to 5 lines on desktop and mobile
- Up to 2 lines on tablet
- Content inside an answer can contain whatever atoms, molecules or organisms it so needs. However, because this right-side variant is inevitably narrow, please consider this restriction in the content that is chosen.
Labels
- Title must read 'Frequently Asked Questions' or translated equivalent.
- Title is a H2-semi-bold font.
- Changing the font size or weight.
- Title abbreviated to 'FAQs'.
Non-JS requirements and considerations
- For desktop accordion questions becomes a list of text anchor links, without a chevron. All answers are exposed underneath the main page content. The question text anchor link directs the user to the answer.
- On tablet and mobile, the questions and answers appear as one group at the bottom of the page.
Use case and exception scenarios
- Quote and buy journeys.
- Forms using unequal width columns (eg, 8 columns / 4 columns (66% / 33%) structure.
Examples
Interactive example
Code example
Main content - place at bottom of left column so placement is correct for non-JS
<div class="o-faq-panel o-faq-panel--right" data-module="o-faq-panel" data-module-load="true">
<h2 class="a-heading a-heading--1 a-heading--semibold o-faq-panel__title">Frequently Asked Questions</h2>
<div class="o-faq-panel-item" id="...">
<h3 class="a-heading a-heading--3 a-heading--semibold o-faq-panel-item__question">...</h3>
<div class="o-faq-panel-answer">
...
</div>
</div>
...
</div>Target content - place at top of right column; these links will be replaced by the JS module content; ensure hrefs for questions match IDs in the main content
<div class="o-faq-panel-target">
<h2 class="a-heading a-heading--2 a-heading--semibold o-faq-panel__title">Frequently Asked Questions</h2>
<div class="o-faq-panel-item__question"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...</span></a></div>
...
</div>Divider - this element can be separated from other elements in the right hand column (for example, a Call us panel) with the inclusion of a 45px top/bottom horizontal divider line placed between the elements; for example:
<div class="o-call-us-panel o-call-us-panel--narrow o-call-us-panel--one [ Modifiers ] itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
...
</div>
<div class=".a-divider-line a-divider-line--horizontal-solid a-divider-line--45-all"></div>
<div class="o-faq-panel-target">
...
</div>Development and test
Notes for developers
- FAQ panels panels should used on light accent colours only.
- Setup content with main content in the wider left hand column for non-js purposes, and place links in the target div within the narrower right hand column; ensure that href links in the target div match the IDs for the appropriate answers in the main content.
- Do not use more than one FAQ panel per page.
- Use a minimum of 2 and maximum of 5 questions per panel; if more than five questions are requested, a separate page should be used, so refer the case back to your user experience team.
Be sure to check correct usage with user experience team before proceding, to ensure that the correct variant (standard or right hand side) is being used for this instance.
Controling the FAQ panel right component programatically
FAQ panel right can be controlled programatically to open/close a single FAQ or close all open FAQs. The following methods are available for use:
| Method | Description |
|---|---|
open( '#faqId' ) |
Open one FAQ item via the id on the o-faq-panel-item. |
close( '#faqId' ) |
Close one FAQ item via the id on the o-faq-panel-item. |
closeAll() |
Close all open FAQs within the FAQ panel. |
For example:
document.addEventListener( 'frameworkready', function () {
FRAMEWORK.require([ 'blocks/o-faq-panel' ], function ( oFaqPanelModule ) {
var oFaqPanelEl = document.querySelector( '#faqGroupId' ),
oFaqPanelInstance = oFaqPanelModule.initInstance( oFaqPanelEl ); oFaqPanelInstance.close( '#faqId' );
});
});Changing locale settings
Locale settings will need to be updated to include appropriate translations for the 'Show more' and 'Show less' links.
en: {
oFaqPanel : { showMore : 'Show more' },
},For more information on this, see our page on how to change locale settings within JavaScript.
Extension component
This component forms part of the 'additional-help' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/additional-help.css" rel="stylesheet" />Notes for testers
Be sure to pay extra attention to breakpoints and screen sizes given the amount of content that the organism could contain; this shouldn't be an issue, but targeted checks to ensure that resizing doesn't compromise content layout are essential.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.o-faq-panel |
Base style for FAQ panel organism | Yes | div |
|
.o-faq-panel--right |
Modifier for right hand side use | Yes | .o-faq-panel |
Used in conjunction with an .o-faq-panel-target div |
o-faq-panel__title |
FAQ panel main title | Yes | .o-faq-panel |
|
.o-faq-panel-item |
FAQ panel question/answer pair item | Yes | .o-faq-panel |
|
.o-faq-panel-item__question |
FAQ panel item question | Yes | .o-faq-panel-item |
|
.o-faq-panel-answer |
FAQ panel item answer | Yes | .o-faq-panel-item |
|
.o-faq-panel-answer__fullwidth |
Style for forcing FAQ panel answer to fit full width (rather than default 75%) at tablet and desktop | .o-faq-panel-answer > * |
||
.o-faq-panel-target |
Target div to be replaced by JS module content | Yes | .o-call-us-panel > div |
Component releases
- Added on: v3.3.0 (27/04/18)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- updated: FAQ panels can now be controlled programatically to open/close a single FAQ or close all open FAQs