Accordion

How to add an Accordion component

Step 1: Add and configure Accordion component

1. Add an Accordion component (see Adding a component for instructions on how to add a component).
2. Select the Section Heading tab to add an optional section that appears at the top of the Accordion component (see Adding a component heading for details about adding a section heading).
3. Select the Block Settings tab.
4. Select the Accordion component default display from the Display menu: 
   1. Choose All Closed to display all Accordion panels closed. 
   2. Choose All Open to display all Accordion panels open.
   3. Choose First Item Open to display the first Accordion panel open and all other panels closed.
5. Select the Accordion component behavior from the Behavior menu:
   1. Choose Auto Close to automatically close the open Accordion panels when the user opens another Accordion panel. With Auto Close, only one Accordion panel is open at a time.
   2. Choose Stay Open to leave Accordion panels open when the user selects another Accordion panel. With Stay Open, multiple Accordion panels can be open at the same time.
6. Check the Show Controls checkbox to provide Open all sections and Close all sections buttons with the Accordion component. These controls allow users to open and close all Accordion panels at once.

7. Add an optional Page Anchor Link to allow for links to the Accordion component (see instructions under Linking to page content).
8. Select the Color Settings tab.
9. Select a color scheme from the Component Color Scheme menu and review the Component Color Scheme Preview to see the effect of changing the color settings.

Step 2: Add an Accordion Panel item

1. Select the Content tab and select the Add Accordion Panel button.
2. Enter a descriptive heading for the Accordion Panel in the Heading field. Note that the heading also serves as the button label for opening and closing the Accordion Panel, so make sure it’s concise and descriptive.
3. In the Body area, you can add content, images and quotes within this section (see Text Editor for details about using the toolbar and text input area). Add your content for the Accordion Panel in this area.
4. (Optional) Add additional components to the Accordion Panel content area by selecting the Choose component button in the Components section. Only use components that will display properly within an Accordion Panel.

Step 3: Configure Accordion Panel item settings

1. Select the Block Settings tab.
2. Add an optional Page Anchor Link to allow for links to the Accordion Panel item (see instructions under Linking to page content). This feature is useful for Accordion components with multiple Accordion Panel items, allowing for links to, for example, the third Accordion Panel item in a four-item Accordion component.
3. Once you have completed your Accordion Panel item configuration settings, choose Save to save the Accordion Panel item.

Step 4: Save Accordion component

1. Preview the Accordion Panel item in the Accordion Panels section of the Create new Accordion dialog (note that the preview for Accordion Panels only displays Accordion Panel item headings). You can add more Accordion Panel items by clicking the plus sign below the first Accordion Panel item.
2. Once you have finished adding Accordion Panel items, choose Save to save the Accordion component.