The Icon Accordion Widget allows you to to displays any content in a unique interactive accordion layouts. This widget enables you to quickly and easily create an interactive icon accordion with its wide range of customization and styling options. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Icon Accordion Widget” below.
Install Icon Accordion Widget for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Icon Accordion”
- Hover over the widget in the search results and click install
- Add your “Icon Accordion” widget to any Elementor Page
First Accordion Closed
Keep the first accordion in closed state.
Set the accordion heading direction.
Show/Hide the icon.
Show/Hide the expand icon.
Close Other on Open
Close other accordion on opening one.
Choose an icon for expand button.
Choose an icon for collapse button.
Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
You can connect two item-based widgets and sync them.
Choose the same group for two or more item-based widgets so they can sync together.
Jump to Item Link Settings
Type the accordion name.
With this option you can create a go to accordion item link.
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Type heading for accordion.
Choose an icon to display.
Select the content type from below options.
- Content - To type text content to display.
- Template - Choose Elementor template to display.
Override Icon Background Color
Set the background color for icon.
Override Heading Background
Set background color for heading.
Icon Accordion Widget Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Set the spacing, border, shadow, background, and radius of items.
You can style the heading background, background image, typography, padding, radius, text color, and border.
You can set the content background, typography, text color, padding, radius, border, and marging.
Set the icon size, background, color, radius, border, and spacing.
Expand Collapse Styling
In this section, set the icon size, background, color, radius, border, spacing, and shadow.
Heading Hover Styling
You can style the heading hover background, text color, icon background, and icon color.
Heading Active Styling
You can set the heading active background, text color, icon background, and active icon color.
Here are some live use cases for the Icon Accordion widget.