Expandable Component

Add a group of expandable accordions to a page, for each expandable item you add a new content item. The title, description and callout are only populated in the first item.

Screenshot of Expandable CompontentScreenshot showing example of Expandable Component content type.

Content Type Details

  • ID: 301
  • Name: Expandable Component
  • Minimum user level: Contributor
  • Compatible with page layouts: Full Width

Multiple adjacent Expandable Component content items are wrapped together to form a group. 

First Expandable Component Only Settings

Add the following optional elements to the first Expandable Component in a group.

  • Show Title: check to show Title, Description and Show Callout elements
  • Title: this will appear above the Expandable Components. Adding a Title will automatically start a new group of Expandable Components.
  • Description: displays below the Title
  • Show Callout: check to show callout elements:
    • Callout Title
    • Callout Description
    • Add Links

Guidance

  • No minimum or maximum limit on number of Expandable Components
  • Adjacent Expandable Components automatically combine into a group
  • Each Expandable Component is created as a separate content item
  • If an Expandable Component in a group has the 'Title' element entered it will make it act as the first in a new group of Expandable Components.

Content Type Elements Details

NameDescriptionSizeTypeRequiredConditionally Shown
NameThe Name element80 CharactersPlain TextYesNo
Show titleCheck this option to show the title

Choose from options: Yes
N/ACheck Box
(List: Yes)
NoNo
TitleAdd a title for the expandable section. Add this to the first expandable item. Adding a title starts a new expandable section.120 CharactersPlain TextYesYes
DescriptionAdd a description for the expandable section which is output after the title. Add this to the first expandable item.350 CharactersPlain TextNoYes
Expandable TitleAdd a title for the expandable item120 CharactersPlain TextYesNo
Expandable BodyAdd the body for the expandable item. See WYSIWYG content options.99999 CharactersHTMLYesNo
Show CalloutCheck to add a callout, if no callout is added the expandable items are wider on larger screens

Choose from options: Yes
N/ACheck Box
(List: Yes)
NoYes
Callout TitleAdd a title for the callout block120 CharactersPlain TextYesYes
Callout DescriptionAdd a description for the callout block350 CharactersPlain TextNoYes
Add LinksAdd linksN/ARepeater
(0-3 Link)
NoYes

Link

This is used by repeater elements on multiple content types to add a link.

  • Minimum : 0
  • Maximum : 3

Content Type Elements Details

NameDescriptionSizeTypeRequiredConditionally Shown
NameThe Name Element80 CharactersPlain TextYesNo
Link TypeSelect link type

Choose from options: Internal, External, Media
N/ASelect Box
(List: Link type)
YesNo
Internal LinkSelect a section or content item for an internal link. Untick 'Use default link text' to customise the link text.N/ASection/Content LinkYesYes
External LinkEnter a full URL (including https://) for an external link250 CharactersPlain TextYesYes
External TitleAdd text for external link120 CharactersPlain TextYesYes
Media LinkSelect a document from media library for a media link e.g., PDF, Word, ExcelN/AMediaYesYes
Media TitleAdd text for media link120 CharactersPlain TextYesYes

Examples

Expandables Component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum aspernatur odit quisquam nulla explicabo sint veritatis sequi porro et tenetur in quam voluptatum magni tempore fugiat, non fuga. Numquam, cumque.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Expandables Component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum aspernatur odit quisquam nulla explicabo sint veritatis sequi porro et tenetur in quam voluptatum magni tempore fugiat, non fuga. Numquam, cumque.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.