Accordion / Toggle Widgets

Accordion Widget

The Accordion and Toggle Widgets are used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.

With both, visitors can scan the item titles, and choose to expand an item only if it is of interest.

The Accordion widget and the Toggle widget do behave differently.

Accordion:

When a page is loaded, the first item of the Accordion widget is always expanded, while all other items remain collapsed. 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. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Toggle:

With the Toggle widget, however, all items are collapsed when a page is first loaded. With the Toggle widget, as many items as desired can be expanded at the same time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Adding Content

When you click on the widget, the design panel on the left will display the options for that widget. Make sure the Content window is showing. 

  1. Title & Content: Click the box that says Accordion #1 or Toggle #1. That will open the options to change the title nd then add the content. Enter the title and description for each item.
  2. Add Item: Use the ‘Add Item’ button to add more accordion items to the list
  3. Icon: 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. 
  4. 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.
  5. Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV