Half-Width Accordion with Promos

Layout Variants: P007

Content Type: Collection

Aspect Ratio: 

• On Promo box: 3:4, 2:1

Expected Use:

• This is styled exactly the same as the P005 Promo Double Right w/ Images component. where the basic teaser title and text is augmented with a half width accordion. After creating a Collection as the main P007 component, you will include one C057 Accordion Collection and a C058 Promo Collection (with two Teasers) as the items in the P007 Collection.
• An expandable/collapsible information container with two supporting promo boxes and images to the right.
• Expandable/collapsible half-width information container, used to progressively disclose information. Typically used for FAQs. Multiple accordions can be stacked on a page. Accordions can be organized in alpha-order by title or in order of priority. One or more accordions can be default-opened to reveal the most important content as well as the expandable\ collapsible functionality of this component. 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. Images as well as text can be added to the body content of an accordion.
• This can be used when you want to group FAQs and still have promo boxes in the right rail of the page.
• A read more toggle can be added to the C057 component embbeded in the P007, 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 the Component:

Create the P007 Collection:

1. Create a Collection.  
2. Assign the P007 Layout Variant
3. The remainder of the content comes from other CoreMedia Documents you will add to the Items field of the P007. No other fields are used in this collection. All other information comes from additional Items you will add below:

•  A collection for the C057 Accordion
• A collection for the C058 Promos

Create the C057 Accordion Collection:

• This is explained in its own page as it can also be used as a standalone component in full width. See the C057 Content Authors' Guide for full instructions. This Collection uses the Teaser Title and Teaser Text as the title and body copy that shows at the top left of the P007 component. Set the Layout Variant to C057. As many Teasers as needed are added to the Items list to create the entries in the accordion.

Create the C058 Promo Collection:

• This is simply a shell where you will add your two Teasers to the items list. Set the Layout Variant to C058. There are no other fields used in this Collection.

Create the Teasers for the C058 Promos:

1. Create a Teaser
2. The Teaser Title is the CTA text
3. The Teaser Text is the Promo body copy. 
4. Add a Picture for the promo box.
5. Repeat this process for the second promo box.

Completing the P007:

1. If you haven't already done so, add your Promo Teasers to the Items list in the C058 Promo Collection.
2. Add the C057 Collection as the FIRST item in the P007 Collection Items list.
3. Add the C058 Promo Collection as the SECOND Item in the P007 Collection Items list.
4.  Add Optional Elements:

Adding Optional Elements:

In order to 'turn on' the Read More so it is visible on the screen, add a boolean property 'readMoreDisplayed' to the embbeded C057 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 and select a Background Color, set this on the Collection's Content Tab via the Background Color section. If the Legacy (Gray) Background Color is selected it will automatically create a short cut to "turn on" this Background color. The boolean property 'backgroundToggle' and 'bgColorState' string property will be auto added on the component's Local Settings. If 'backgroundToggle' is ticked, the 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). The 'bgColorState' property value varies depending on the selected Back Ground color on the Content tab.