The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.
With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.
A similar widget is the Toggle widget, but there are two main differences between the Accordion widget and the Toggle widget.
When a page is loaded, the first item of the Accordion widget is expanded, while all other items remain collapsed. With the Toggle widget, however, all items are collapsed when a page is first loaded.Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle widget, however, as many items as desired can be expanded at the same time.
Content
Accordion
Accordion Items Title & Content: Enter the title and description for each itemIcon: Select the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the expanding concept. Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept.Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIVAdd Item: Use the 『Add Item』 button to add more accordion items to the list.
Style
Accordion
Border Width: Set the thickness of the border around the accordion and between each itemBorder Color: Choose the color of the border around the accordion and between each item
Title
Background: Choose the color of the title』s backgroundColor: Choose the color of the non-active titles』 textActive Color: Choose the color of the active title』s textTypography: Set the typography options for the titlesPadding: Set the padding for the titles
Icon
Alignment: Align the icon to the left or right of the titleColor: Choose the color of the iconsActive Color: Choose the color of the active iconSpacing: Control the spacing between the icon and the title
Content
Background: Choose the background color of the contentColor: Choose the text color of the contentTypography: Set the typography options for the contentPadding: Set the padding for the content
Advanced
Set the Advanced options that are applicable to this widget