Toggle
The toggle element lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don't have to scroll through a long page and can sift through the titles easily.
A similar element is the Accordion element, but there are two main differences between the Toggle element and the Accordion element.
When a page is loaded, all toggle element items are collapsed. With the accordion element, however, the first item is expanded, while all other items remain collapsed.
With the Toggle element, as many items as desired can be expanded at the same time. With the Accordion element, 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.
Toggle
Toggle Items: Enter the title and description for each item.
Icon: Select the icon to represent the action of expanding an item.
Active Icon: Select the icon to represent the action of collapsing the active item.
Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.
Add Item: Use the 'Add Item' button to add more toggle items to the list.
Style
Border Width: Set the thickness of the border around the toggle element and between each item.
Border Color: Choose the color of the border around the toggle element and between each item.
Space Between: Set the amount of space between each item.
Box Shadow: Set the box shadow around the toggle element, 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: Choose the color of the title’s background.
Color: Choose the color of the non-active titles’ text.
Active Color: Choose the color of the active title’s text.
Typography: Set the typography options for the titles.
Padding: Set the padding for the titles.
Icon
Alignment: 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.
Content
Background: Choose the background color of the content.
Color: Choose the text color of the content.
Typography: Set the typography options for the content.
Padding: Set the padding for the content.
Last updated