Accordion element

In this Article

• Customize your Accordion element
• Configure your Panel Group element settings
• Share an Accordion or Tabs element

The Accordion element lets you create a series of "panels" that can be hidden or shown by the end user. Each of these panels can be configured to display custom content and expanded or collapsed as a way of targeting a specific block of content displaying in a particular panel.

Insert an Accordion element by going to the Layout tab in your Element library. 

Customize your Accordion element

The element is initially created with one panel. Click the green “Add Panel” link to add more panels.

Hover over each panel to access the settings gear where you can change the title for that panel, as well as drag to reorder panels or delete if no longer needed.

For more information about using Accordion elements, refer to Customize an Accordion or Tabs element.

Configure your Panel Group element settings

The Panel Group element settings can be accessed by clicking on the element settings gear in the top right corner.

The Panel Group element settings includes the following configuration options: 

• Accordion OR Tabs Format: Choose "TABS" format to change to a Tabs element where panels will display horizontally instead of vertically as they display in an Accordion element.
• Title: Change or toggle off to remove the Title over the entire panel group.
• Expand first panel by default: When selected, the first panel of the accordion will be expanded when the page is loaded. If this checkbox is left unselected, all accordion panels will be closed when the page loads.
• Expand only one panel at a time: Panels will automatically close themselves if another panel is clicked when this checkbox is selected. When unselected, the user will have to manually close each panel.
• Show Expand/Collapse Icon: Display an arrow icon before or after the title, or select “None” to not show the icon.

Share your Accordion or Tabs element 

It's very helpful and efficient to create Shared elements so that you and your team can avoid the process of re-creating elements. Shared elements will appear in the Shared tab in the Element Library. However, sharing an Accordion or Tabs element will be a bit different than the normal process. Learn more by checking out the section of the article on Shared elements called, "Share an Accordion or Tabs element."