FAQ panel

Notes for developers

• FAQ panels panels should be used on light accent colours only.
• The first element within the .o-faq-panel-answer div will ideally be a standard unstyled <p> with no markup tags within it (as these may be cropped by the truncation script); if the initial element is not a paragraph, all content will be hidden and replaced by a Show more link.
• 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.

A data-description tag must be used where a descriptive link is required, for example where there is very little text or an object/image/chart/table or list begins the content so there is nothing to interpret the purpose of the link. Description data is combined with the text link and presented as an aria-label.

It must be positioned at the same level as the FAQ answer.

<div class="o-faq-panel-answer" data-description="...">

Rerunning truncate function

If additional FAQs need to be added into the panel on the fly, then the function to scan, truncate and resize the panel has been exposed so it can be rerun. Appropriate markup will need to created and inserted into the correct point in the DOM, but can then the event update must be called on the element containing the data-module attribute.

Example using the utility functions available.

utility.trigger( '[ID or class of div including data-module call ]', 'update' );

Visible labels and accessible names

The Read more links used to link to copy on external pages must contain an extra span with the class u-hidden--visually within the a-button__inner to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

<span class="a-button__inner">Read more<span class="u-hidden--visually"> about [question]</span></span>

This also helps to ensure that all buttons and links are unique through the page, rather than having multiple instances of links simply saying "Read more".

Controling the FAQ panel component programatically

FAQ panel can be controlled programatically to open/close a single FAQ or open/close all open FAQs. The following methods are available for use:

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.