C057 Full-Width Accordion

Full Width Accordion

Layout Variant: C057

Content Type: Collection

	Teaser Title	Teaser Text	Pictures and Media	Items	CTAs
C057 Collection	Yes	Yes	No	Yes	No
Teasers	Yes	Yes	No	No	No

Aspect Ratio:

Not Applicable

Expected Use:

Expandable/collapsible full-width information container, used to progressively disclose information. Typically, this component is used for product FAQs or product troubleshooting information. Multiple accordions can be stacked on a page. Accordions can be organized in alpha order by title, or in order of priority. There is no limit to the amount of body content that can be displayed in an accordion, but all body content is contained on a single page. Inline mages as well as text can be added to the body content of an accordion.

A read more toggle can be added to the component, truncating the body copy to 3 lines of text by default. When the toggle is unclicked, the rest of the content will appear below as normal. An optional background toggle can be enabled to display the collection with Legacy (Gray) background. Note: Each optional element is authorable individually and in combination with each other.

Building an accordion:

For the main C057 Collection, your components should contain the following:

Create a Collection
Teaser Title - This is the main headline of the component.
Teaser Text - This is the body copy of the component.
Image or Other Media and CTA are not used in this component.
Set the Layout Variant to C057.
You can add as many Teasers to the Items list as you wish to create the entries for the accordion

Teasers for Accordion entries:

Create a Teaser
The Teaser Title is the title of the accordion you see when the item is closed
The Teaser Text is the body copy you see when the accordion row is opened. You have the ability to use limited functionality of the rich text here as well as add embedded links. You can also embed a C044 or C034 component in the Teaser Text to allow for greater use of the rich text editor formatting.
Add the Teaser to the Items list in the C057 Collection
Repeat this process as many times as needed for each row in the accordion.

Adding Optional Elements:

Authors have the option to "turn on' the FAQ markup schema feature, add a boolean property 'enableFAQSchema' to the component's Local Settings. If this property is checked, this will allow Google to see the contents of the accordion and a question (Teaser Title) and answer (Teaser Text) as well as improve ranking in Google for FAQ/questions. If this property is unchecked or it is not added in the Local Settings then the questions and answer will not be visible in Google search. To test your url, enable or disable the Bollean Property 'enableFAQSchema'. The author can go to this site (https://validator.schema.org/) and drop in the URL to test if the schema is valid and working.

In order to 'turn on' the Read More so it is visible on the screen, add a boolean property 'readMoreDisplayed' to the component's Local Settings. If this property is checked, the Read More will be displayed. If this property is unchecked or it is not added in the Local Settings then the rest of the content will appear below as normal.

To add a short cut to "turn on" the Legacy (Gray) Background color, add a bolean property 'backgroundToggle' to the component's Local Settings. If this property is checked, then Legacy (Gray) background color will be displayed. If this property is unchecked or it is not added in the Local Settings then the background color is set to 'Default' (no color).