Accordion Widget

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.

Accordion Widget

Content Tab

• Accordion Items: Enter a title and content for each accordion item.
• Add Item: Click on the Add Item button to add an accordion item.

Styles Tab

• Icon Alignment: Align the icon to the left or right of the title.
• Border Width: Set the thickness of the border around the accordion and between each item.
• Border Color: Choose the color of the border around the accordion and between each item.
• Title Color: Choose the color of the non-active titles’ text.
• Title Background: Choose the color of the title’s background.
• Active Color: Choose the color of the active title’s text.
• Typography: Set the typography options for the titles.
• Content Background: Choose the background color of the content.
• Content Color: Choose the text color of the content.
• Typography: Set the typography options for the content.