Accordion
A component is used to display an expandable list item.
Adding an Accordion Component
- Select the Accordion component from the Components drawer. You can open the list of components by clicking the
+
button next to Components. - Select the added component in the Components tree.
- Go to the Data tab (third tab) in the Properties panel and under Setup > Label, add a label on the component to display on the screen.
- Select the Accordion Item from the Components drawer. In the example below, we're adding two Accordion Item components.
- Select the Accordion Item component.
- Go to the Data tab (third tab) in the Properties panel and under Setup > Item Label, add a label on the component to display on the screen.


Configuration Properties
Property | Description |
---|---|
Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Accordion. |
Open Text Color | Choose a color value to display when the Accordion is in an expanded state. |
Close Text Color | Choose a color value to display when the Accordion is not in an expanded state. |
Caret color | Choose a color value for the Caret icon on the Accordion component. |
Expanded | Enable this option to expand the Accordion Items. It is disabled by default. |
Previous Title | Previous button title. |
Icon | Choose an icon from the Icon Picker to display it on the Accordion component. |
Accordion Item
An Accordion Item component is nested inside the Accordion component. It is a list item component and is displayed when the Accordion component is in an expanded state.
Configuration Properties
Property | Description |
---|---|
Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Accordion Item. |
Icon | Choose an icon from the Icon Picker to display it on the Accordion Item component. |
Icon Color | The color of the icon. |
Updated 2 months ago
Did this page help you?