Accordions

Introduction

There are now two accordion options available.

An accordion expands to reveal more relevant information if a user is interested in the topic. An accordion takes up less vertical space and as such is a possible solution when pages must have a lot of content.

When to use

The original accordion component is designed primarily for FAQs whereas the new accordion component is for grouping related content on a page.

Frames

The accordion is available for use in the following frames:
  • One column frame
  • Two column frames:
    • 6-6
    • 8 side of 8-4 / 4-8
    • 9 side of 3-9 / 9-3
    • 7 side of 7-5 / 5/7

Sitecore fields

The accordion component consists of two parts:

(1) Accordion listing:

  • Title - Uses an H2 (optional)
    • Single Line Text Field
    • Limit text to one line (approx. 25 characters or less)
  • Accordion item(s) (required)
    • A selectable list of items

(2) Accordion item(s):

  • Heading – span (16 px font size)
    • Multi-line text field and cannot contain formatted text
    • This is the “question” field for the accordion item
  • Description
    • Rich text field
    • This is the “answer” field for the accordion item

Required fields

Both the heading and description are required for the accordion to work successfully.

Additional information

You must first create the accordion item, and once complete, select it to show up in the accordion listing (the Accordion items field in the listing component).

Color and Link are deprecated and are not currently in use. They are slated for removal.

Spacing

If using the title field, there is a standard of 46 pixels between the heading and the first question.

When you expand an accordion item, there is 16 pixels between the question and the answer.

The accordion collapse or expand icon is 36 x 36 pixels.

Content Variations

Default Accordion - original

Commonly asked questions from policyholders

Accordion with long answer (1st FAQ) - original

Employee benefits and cost management solutions

Accordion with wrapping question - original

Commonly asked questions about disability insurance

NEW - Accordion component in 6-6 frame

man in jacket looking at a tablet

Settings

This accordion component consists of 2 parts, the "accordion listing" component itself which has a "Title" and a selectable list of "Accordion items", and then nested under the accordion listing item, the "accordion item(s)". The heading is a single line text field. It cannot contain formatted text. The accordion items is a treelist of all the available accordion items under the listing.

The accordion item has 4 fields, a "Heading" and a "Description", "Link" and "Color". The description is a rich text field and so it can contain some basic formatted text (ULs, bold text, links etc). The heading is a multi-line text field and cannot contain formatted text. Both the heading and description are required for the accordion to work successfully. Color and Link are deprecated and are not currently in use. They are slated for removal.

You must first create the accordion item, and once complete, select it to show up in the accordion listing (the Accordion items field in the listing component.