SJC 2023 - Accordion content type details
ID: 573
Name: SJC 2023 - Accordion
Description: Each accordion is a separate piece of content.
Content element details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Show on Secondary page | Select the checkbox to show the content on the full width secondary page | 80 Characters | Check Box | No |
| Section Heading (H2) | Enter the title for the content | 80 Characters | Plain Text | No |
| Section Description | Enter the brief description of the content | 350 Characters | Plain Text | No |
| Output Accordion Color as Purple | Select the color of the accordion. By default, its “White” | 80 Characters | Check Box | No |
| Accordion Title (H3) | Title for example “How do I apply for a course” | 150 Characters | Plain Text | Yes |
| Accordion Description | Content for the expanded accordion. Supports rich text such as bold, italics. | 99999 Characters | HTML | Yes |
| Call to Action (CTA) Text | Enter the text for the Call to Action | 85 Characters | Plain Text | No |
| CTA Link (internal) | Select a section/content for an internal link | 80 Characters | Section/Content Link | No |
| CTA Link (external) | Only enter this if you are NOT entering an internal link | 99999 Characters | Plain Text | No |
| CTA Link (PDF) | Select the file from the media library | 80 Kilobytes | Media | No |
| CTA Link open in new window | Select to open link in new window | 80 Characters | Check Box | No |
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 |
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!
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!
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!
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!