Accordion

Reduce clutter with a clickable dropdown

Demo exampleOverviewHow to use itHow to make an FAQ sectionTips for making a non-FAQ section

Demo - Tips for using text with a clickable dropdown

Users can scan accordion headings and expand each section one by one, if they want to know more.

The 'Non-FAQ' Accordion can be used for several purposes, such as:

  • Explaining a product or service
  • Providing additional information and context

Below the self-contained heading, there is a text box (called a content panel). The information that appears here should directly relate to the heading, so users get the exact information they are looking for, and are expecting. 

    Format your copy so users can easily understand and scan the content. So remember to break up the copy here as you would other body text. This includes

    • Using bold copy
    • Paragraphing to avoid walls of text
    • Bulleted or numbered lists

    See our Accordion guide for more tips on using this feature.

    Overview

    Reduce clutter with a clickable dropdown

    The Accordion places information behind interactive panels, shortening the page and reducing the need to scroll. It’s a good way of making several points in an easily scannable way while introducing an element of interactivity.

    You can also use the Accordion as part of the Editorial Block with Sidebar, where it can sit alongside an image.

    There are two different types of Accordion:

    • FAQ (↑ and ↓ symbols) – for questions and answers
    • Non-FAQ (+ and − symbols) – for other types of information or explanation

    How to use it

    To get started, use the checkbox to select your chosen Accordion type. 

    How to make an FAQ section

    You should make an FAQ section to answer queries that are not naturally answered within the main content.

    When writing an FAQ section, ask yourself:

    • Are these really questions people are often asking?
    • Have you already answered the question elsewhere on the page?
    • Should you provide this information within the main content instead, at the point of user need?

    Use the Accordion ‘heading’ text field to make it clear that an FAQ section is coming up. You don’t need to be creative here. Simply make the heading one of the following:

    • Frequently asked questions
    • [Product Name] frequently asked questions

    The heading must not occupy two full lines. Use a maximum of 15 words (72 characters).

    To create a new FAQ, select ‘add new FAQ’ and complete the following text fields:
     

    FAQ question

    This is the text that appears on the FAQ ‘tile’. It’s always present, whether the user clicks on the FAQ or not.

    An FAQ should be a question like:

    • Can I pay my premium in monthly instalments?

    Don’t let the FAQ question run to two full lines. Use a maximum of 15 words.

    FAQ answer

    The FAQ answer should directly answer the FAQ question, often beginning with a ‘yes’ or ‘no’. For example:

    • (FAQ question) Can I pay my premium in monthly instalments?
    • (FAQ answer) Yes, you can pay instalments over 10 months, subject to a small interest charge and credit acceptance.

    FAQs are reusable. So when you build an FAQ section, you can save time by selecting an existing relevant FAQ.

    Yes, it’s important to name FAQs carefully. FAQs are reusable – but only if you can find them in the CMS. To make FAQs easy to search for, specify the:

    • FAQ question
    • Product or service the FAQ relates to

    Tips for making a non-FAQ section

    A non-FAQ section can be used for several purposes, such as:

    • Explaining a product or service
    • Providing additional information and context

     Importantly, users must still be able to make sense of the content panel without clicking to reveal the dropdown content.

    The Accordion heading provides the required context for the non-FAQ headings to make sense. For example:

    • Fine Art insurance coverage options

    The Accordion heading must not occupy two full lines. Use a maximum of 15 words (72 characters).

    The non-FAQ headings are always present, whether the user clicks on the content panel or not. So they must make sense on their own without the dropdown content.

    For example, non-FAQ headings under ‘Fine Art insurance coverage options’ might be:

    • Theft and accidental damage
    • Loss in value
    • Transit and exhibition coverage

    The non-FAQ heading must not occupy two full lines. Use a maximum of 15 words.

    Use the ‘content’ text field to elaborate on the idea introduce by the non-FAQ heading. For example:

    • (Non-FAQ heading) Loss in value
    • (Content) Covers the cost of restoring a damaged piece and compensates for market depreciation.

    Non-FAQs are reusable, helping you and other publishers save time when building non-FAQ sections.

    To make non-FAQs easy to search for, specify the:

    • Non-FAQ heading
    • Product or service the non-FAQ relates to

    Do's

    • Arrange panels for maximum impact

      Drag and drop the panels into your preferred order, leading with your strongest points and most important FAQs.

    • Make sure you format text

      This includes using paragraphs to break up copy and options such as bulleted lists or bold copy to aid readability.

    Don'ts

    • Don’t use more than ten panels per component

      This can be overwhelming for users and a chore to navigate.