Advanced Accordion

This guide demonstrates how to use the Advanced Accordion Component Item. This feature allows you to use components within an accordion. Note that this is different from the Accordion component, which creates an accordion with basic text.

Step by step

To add the Accordion Component Item:

1. On the page you are creating or editing, select the Component tab. Then, tap the Components drop-down. 
   
   
    
2. Choose Add Accordion Component Item.
    
3. The accordion component will appear. Complete the following fields that will be displayed when the accordion is closed or expanded:
   1. Title - Enter a title, which will display in large font.
   2. Pre-title - Enter the pre-title, which will display above the Title.
   3. Subtitle - Enter a short description for the item.
   4. Image - Add an image, which will display to the left of the text. Select Add Media, then select an image from your desktop. Review DAS's helpful hints for writing alt text for images.
   5. Teaser text- Enter a sentence or two telling what the content is about.
       
4. Next, enter the Content. This is the body of the content that will be displayed only when the accordion is expanded. Tap the Add .... to content dropdown, then select a component. Add as many various components as desired. 
   
   
    
5. Additional actions you can take include:
   1. To move or rearrange the order of items, drag and drop a section to the position you'd like using the 6 dots, found to the left of the item.
   2. To remove a single resource, tap the three dots within the item section, then select Remove.
   3. To delete the entire component, tap Remove. Then, tap Confirm removal. 
       
6. Select Save. If you are ready to publish your page, ensure the Published toggle is enabled (green in color). 

Example

Front-end