Accordion

• Component resides inside EH Composites tab in the Toolbox by the name EH Accordion.
• The accordion component is built using a parent-child model where the parent has the heading and body of the Accordion and child(ren) are the list of collapsible items.
• Applicable fields of Accordion parent item: 
  • Heading :  RTE field to add heading.
  • Body : RTE field to body.
• Applicable fields of Accordion child item: 
  • Heading :  RTE field to add heading of the accordion child item, displayed when the item is collapsed
  • Content : RTE field to add body/description of the accordion child item, displayed when the item is expanded.
• Rendering Parameters(in Accordion Control section) :
  
  • CanToggle - select to allow toggling of sections. Selected, by default.
• Accordion has two variants - one with background image and the other with no background image.
• Accordion with background image :
  • Background image is fixed, not editable by CA.
  • It can be added via the Pain Bucket Setting "Apply Background Image" available in the EH Accordion section.
  • The Heading and Body of the accordion is center-aligned.
  • An example of this variant is shown HERE.
  • This variant needs to be added directly under Main placeholder or Container component. Background image will not fill the full width container if it's placed under Section Container component.
• Accordion with no background image :
  • This variant is the default one
  • The Heading and Body of the accordion is left-aligned.
  • An example of this variant is shown HERE.

Below are step-by-step instructions on how to add and manage an Accordion. 

1. In the top left corner, click 'Add Component' icon. 

2. Select rendering 'Accordion' (located underneath EH Composites) 

3. Once you selected a rendering, you will be promoted to create/select a data source for this component.

4. Once the accordion has been placed, there will be a title, eyebrow, RTE, and two accordion items by default. 

5. To edit content with an accordion item, ensure the 'Editing' view is enabled underneath the View ribbon.

6. To insert new accordion items, click on an accordion item.

7. A dialogue box will open at the top of the item, click the icon to add an item. You will be prompted to create a data source for this accordion item in the content. If you need to delete an accordion item, click the icon. 

  - Content authors also will be able to rearrange accordion items with the same dialogue box.

8. Under Paint Bucket settings, content authors will be able to edit the easing function, animation speed, if users can toggle items if users can open multiple items and if items are expanded by default.

9. Content Author should save and publish changes. 

Editing Carousel in Content Editor 

1. Locate data sources in Content Tree 

2. Right Click Accordion data source in the local page

3. Insert Accordion Item 

4. Content Author will be able to manage data fields. 

Accordion- Background:

• The Accordion will be used primarily on the interior pages and allows you to stack a list of collapsible sections.
• The Accordion should contain the following elements:
  • Heading (RTE)
  • Body (RTE)
  • Accordion Items (RTE)
• The background is fixed not editable by CA. (Image provided by Emory)
• Can Toggle should be enabled by default
• The Background image is stored in the media library.
• The CA should be able to add unlimited list items.
• Upon page load the accordion should be in a closed state.
• The accordion Icon should change to an open/close state. +/-
• When user opens one accordion item the other items remained closed, opening one closes the other.
• The styling followed XD designs
• The CA should have the ability to remove the eyebrow
• This component must follow accessibility standards for Alt text and keyboard navigation

Accordion- No background:

• See requirements above, exceptions:
  • No Background
  • Left Alignment for header

Mobile:

• Content is stacked