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
Space Between: Set the amount of space between each item
Normal/Hover/Active: Set the style of the collapsible panels for normal, hover, and active modes.
Background Color: Choose the color of the panel content.
Border Type: Set the type, parameters, and color of the panel content borders.
Radius: Set the border radius to control the roundness of the corners.
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
Caption
Margin: Adjust the space around the title bar to control the distance between the title bar and other elements.
Padding: Set the distance between the title text and the borders of the title bar to increase reading comfort.
Typography: Define the font, size, weight, and other typographic properties of the title text.
Icon alignment: Choose the alignment of the icon in the title bar, either left or right.
Icon size: Set the size of the icon in the title bar.
Spacing: Adjust the distance between the icon and the title text.
Normal/Hover/Active: Set different styles for normal, hover, and active modes.
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
Icon Color: Define the color of the icons in the title bar.
Border Type: Choose the style of the border for the title bar, such as no border, solid, dashed, etc.
Radius: Adjust the roundness of the title bar borders.
Shadow: Add a shadow to the title bar to enhance the visual depth.
Content container
Background Type: Set the background of the content area, which can be either solid or gradient.
Text Color: Define the color of the content text to ensure readability.
Typography: Adjust the font, size, line height, and other typographic settings of the content text.
Margin: Set the space between the content container and other UI elements.
Padding: Set the distance between the content text and the container boundaries.
Border Type: Choose the style of the border for the content container.
Radius: Set the roundness of the content container borders.
Shadow: Add a shadow to the content container to enhance the visual effect.
Advanced Settings
Set the Advanced options that are applicable to this control.