SJC 2023 - Accordion content type details

ID: 573
Name: SJC 2023 - Accordion
Description: Each accordion is a separate piece of content.

Content element details

NameDescriptionSizeTypeRequired
NameThe Name Element80 CharactersPlain TextYes
Show on Secondary pageSelect the checkbox to show the content on the full width secondary page80 CharactersCheck BoxNo
Section Heading (H2)Enter the title for the content80 CharactersPlain TextNo
Section DescriptionEnter the brief description of the content350 CharactersPlain TextNo
Output Accordion Color as PurpleSelect the color of the accordion. By default, its “White”80 CharactersCheck BoxNo
Accordion Title (H3)Title for example “How do I apply for a course”150 CharactersPlain TextYes
Accordion DescriptionContent for the expanded accordion. Supports rich text such as bold, italics.99999 CharactersHTMLYes
CTA TextEnter the text for the Call to Action85 CharactersPlain TextNo
CTA Link (internal)Select a section/content for an internal link80 CharactersSection/Content LinkNo
CTA Link (external)Only enter this if you are NOT entering an internal link99999 CharactersPlain TextNo
CTA Link (PDF)Select the file from the media library80 KilobytesMediaNo
CTA Link open in new windowSelect to open link in new window80 CharactersCheck BoxNo

How to use

Adds an accordion with each panel being a separate piece of content. The Accordion Title is shown when the accordion is closed and the Accordion Description is the content shown when accordion is open.

The background to the open accordion panel is white by default, but this can be changed to purple by selecting the Output Accordion Color as Purple checkbox - select it in the first accordion item to change all the accordion items.

There is the option to add a section heading and description above the accordion. This should be populated in the first accordion item only.

Select the Show on Secondary page checkbox for all accordion items when using this on pages with the Secondary page layout to center the accordion.

Examples

Section Heading

This is the Section Description text

This is the Accordion Description for the first accordion content item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Test heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!

 

 

Column 1 Column 2 Column 3 Column 4
w x y z
1 2 3 4

 

CTA Text (internal link)

This is the Accordion Description for the second accordion content item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!

CTA Text (external link - opens in new window)

This is the Accordion Description for the third accordion content item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!

CTA Text (media link)

Section Heading - Purple background accordion

This is the Accordion Description for the first accordion content item.

Test H3 heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Test H4 Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Test H5 heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!

 

Column 1 Column 2 Column 3 Column 4
x y z a
1 2 3 4
gf hg hg hgs

This is the Accordion Description for the second accordion content item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!

CTA Text (internal)

This is the Accordion Description for the third accordion content item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure rem incidunt corrupti temporibus vel, aperiam expedita illo consequatur, eius cupiditate, laboriosam iusto libero vitae ipsa praesentium perspiciatis nisi. Eum amet facilis ducimus nesciunt voluptatem a laudantium excepturi magnam repellat necessitatibus dignissimos vel sit quisquam, culpa vitae! Id?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium magni expedita sint neque atque distinctio dolorem explicabo laborum, error aliquam dolorum est delectus commodi amet at laudantium fuga. Neque, nihil id in ab iure quo error unde ex aut aliquam voluptatibus. Exercitationem provident sequi alias ipsam, magni iusto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eveniet iure impedit, beatae eaque accusamus quo quis sint placeat, distinctio explicabo omnis fuga repellat reiciendis delectus. Rerum vitae, repellat odio esse sint minus harum officia eius labore obcaecati distinctio nam fugiat inventore? Eligendi asperiores quasi quaerat nobis laborum!