The Toggle control lets you create the content sections that are collapsed, so the visitor only sees the titles of each content section. This lets you show your content in a condensed form, so users don’t have to scroll through a long page and can sift through the titles easily.
Add Toggle to the page
Firstly, find the Toggle control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Set content of Toggle
Move on to the Basic section. 3 default toggle items are added by default. Use the ‘Add Item’ button to add more toggle items to the list. You can also move the orders of toggle items, or delete items.
Click each tab to expand setting section. Enter the title for each item in the Title option. Or set the dynamic display rules to show/hide this item dynamically.
Icon: Select the icon to represent the action of expanding an item. Choose either None or select an icon from the Icon Library.
Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None or select an icon from the Icon Library.
Icon can be displayed at the beginning or the end of each item. The position can be set from the style settings panel.
Layout: select which layout would you like this Toggle control will be. There are 2 type of layouts: the Classic and Accordion. With the Classic layout, as many items as desired can be expanded at the same time. With the Accordion layout, however, only one item can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion.
Active by default: Turn this on will make the first item expanded by default, otherwise, all the items will be collapsed.
Styling the Toggle control
General
Border Width: Set the thickness of the border around the toggle control and between each item
Border Color: Choose the color of the border around the toggle control and between each item
Space Between: Set the amount of space between each item
Shadow: Set the box shadow around the toggle control, or around each item if there is space between each. You can adjust the box shadow’s Color, Horizontal position, Vertical position, Blur, and Spread as well as the shadow’s Position, which can be either Inset or Outline
Title
Background Type: Select the Toggle control's background color. You may use a solid or gradient color.
Text Color: Choose the color of the non-active titles’ text
Active Text Color: Choose the color of the active title’s text
Typography: Set the typography options for the titles
Padding: Set the padding for the title
Icon
Align: Align the icon to the left or right of the title
Color: Choose the color of the icons
Active Color: Choose the color of the active icon
Spacing: Control the spacing between the icon and the title
Icon Size: Set the size of the icons.
Content
Background Type: Select the background color of the content area. You may use a solid or gradient color.
Advanced Settings
Set the Advanced options that are applicable to this control.