2024 Duplicated Accordion

Description

Use the Accordion (updated) content type to add accordion panels to a page. Each content item is one accordion panel.

How to use

  • Add an Accordion Group Heading - only needs to be added to the first Accordion content item
  • Check the Check if using on Full Width checkbox on sections using a full width page layout
  • Add the Accordion Heading - this is displayed when the panel is closed
  • Optionally , add a Accordion Sub Heading - this is displayed at the top of the open panel
  • Optionally, select an image from the media library for Accordion Image
  • Optionally, select the Accordion Image Alignment If using an image 
  • Check White Text? checkbox if using Dark teal as the Background Color
  • Either Select a page for the CTA Button Internal OR paste in the URL for CTA Button External - do not use both.

Examples

 

Accordion

Optional Subheading

Paragraph Text (3-5 Sentences)— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum turpis in augue consectetur, non cursus massa vestibulum. Aenean et augue suscipit, ultrices augue vel, faucibus velit.Fusce pellentesque elit non felis commodo, non tempus urna gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A student exercising

Optional Call to Action

Optional Subheading

A student exercising

Paragraph Text (3-5 Sentences)— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum turpis in augue consectetur, non cursus massa vestibulum. Aenean et augue suscipit, ultrices augue vel, faucibus velit.Fusce pellentesque elit non felis commodo, non tempus urna gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Optional Call to Action

Optional Subheading

A student exercising

Paragraph Text (3-5 Sentences)— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum turpis in augue consectetur, non cursus massa vestibulum. Aenean et augue suscipit, ultrices augue vel, faucibus velit.Fusce pellentesque elit non felis commodo, non tempus urna gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Optional Call to Action

Optional Subheading

A student exercising

Paragraph Text (3-5 Sentences)— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum turpis in augue consectetur, non cursus massa vestibulum. Aenean et augue suscipit, ultrices augue vel, faucibus velit.Fusce pellentesque elit non felis commodo, non tempus urna gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Optional Call to Action

Accordion content type details

ID: 185
Name: Accordion
Description: Add a collapsible Accordion

Content element details

NameDescriptionSizeTypeRequired
NameThe Name element80 CharactersPlain TextYes
Accordion Group HeadingText displayed once between each set of accordions150 CharactersPlain TextNo
Accordion HeadingThe text displayed before the Accordion is opened.1954 CharactersPlain TextYes
Accordion ContentThe content to be displayed inside the Accordion, once opened.19541954 CharactersHTMLYes
Check if using on Full WidthCheck when on full width layout80 CharactersCheck BoxNo
Accordion Sub HeadingH3 text inside accordion150 CharactersPlain TextNo
Accordion ImageUpload from media library80 KilobytesMediaNo
Accordion Image AlignmentSelect an alignment for the image80 CharactersSelect BoxNo
CTA Button TextEnter text for the link80 CharactersPlain TextNo
CTA Button InternalSelect a section/content for an internal link80 CharactersSection/Content LinkNo
CTA Button ExternalOnly enter this if you are NOT entering an internal link200 CharactersPlain TextNo