Accordion – Custom Icon

Business Background

Choose from a variety of Custom Icons. This creates visual interest in your projects and can convey a purpose so users can easily understand and recognize the required information.

How to Video

Coming Soon!

How to Guide

  1. Click the icon to open the list of elements.
  2. Select the Widget option from the list.
  3. Drag-and-drop the Accordion container to the canvas.
  4. Click the Accordion settings Gear icon. The Accordion Settings screen opens.
  5. Select the Interactivity option from the list.
Custom Icon option
Custom Icon option
  1. Click the Custom Icon checkbox and click the settings Gear icon. The Configure Custom Icon screen opens.

Expand Icons

  1. Select the Expand option and use the toggle switch to enable the Expand Icon.
  2. Click the Select from Library button. The Select icon screen opens.
Configure Custom Icon screen
Configure Custom Icon screen
  1. Configure any icons for valid input.
Select icon screen
Select icon screen

Collapse Icons

  1. Select the Collapse option and use the toggle switch to enable the Collapse Icon.
  2. Click the Select from Library button. The Select icon screen opens.
Configure Custom Icon screen
Configure Custom Icon screen
  1. Configure any icons for valid input.
Select icon screen
Select icon screen
  1. Select an icon and click the Apply button.

The new icons are added to the accordion container.

Custom icon
Custom icon

Hidden Title

Need more help?